使用NG選項添加glyphicon圖標爲「拯救」所選項目

如果我們有這種情況....使用NG選項添加glyphicon圖標爲「拯救」所選項目

3元一個下拉。在選擇一個項目並點擊保存按鈕後，下拉菜單中的ng模型會綁定一個html標籤，以便ng模型現在在項目名稱前添加一個圖標圖標。

我試過了一個基本的實現，但是我無法完成它。

示範

var app = angular.module('myApp', ['ngSanitize']) 
app.controller('myController', function($scope){ 
    $scope.name = 'Dylan' 

    $scope.saved = false 
    $scope.data = [{ 
     'name' : 'Item 1', 
     'color': 'red' 
    }, 
    { 
     'name' : 'Item 2', 
     'color': 'blue' 
    }, 
    { 
     'name' : 'Item 3', 
     'color': 'green' 
    }] 

    $scope.saveItem = function(item) { 
     // var index = $scope.data.indexOf(item); 
     // $scope.data[index].name = "&#10003;" + item.name 
     // console.log(index) 
     $scope.binder = " &#10003; " + item.name; 
    } 

})

觀

<body ng-app="myApp"> 
    <div ng-controller="myController"> 
     <span class="glyphicon glyphicon-star" aria-hidden="true"></span> {{name}} 

    <div class="row"> 
     <div class="col-sm-2" > 
      <select class="form-control selectPicker glyphicon" 
        ng-model="selectedItem" 
        ng-options = "item as item.name for item in data"> 
      </select> 
     </div> 
    </div> 

    <br> 

    <button type="button" 
      class="btn btn-danger" 
      ng-disabled="!selectedItem"  
      ng-click="saveItem(selectedItem)"> 
      Save 
    </button> 


    <div ng-bind-html="binder"></div> 
</body>

Preview of result

我想是這樣的....

目前的ng-model'Item 1'將被完全替換/更新，就像活頁夾一樣（包括勾號）。

此外，我試圖用ng-repeat做同樣的事情，但是這不是我的選擇，因爲我需要在整個應用程序中使用對象屬性。根據我的理解，使用ng-repeat，似乎選定的值是一個字符串而不是一個對象。

預先感謝任何幫助或建議:)

來源

2017-09-08 Dylan Busuttil

A）如果你的意思是你要的Glyphicon添加到選擇那麼這並不簡單，我可以指出你here

B）如果你想添加簡單的UTF-8符號，那麼這將顯示在以下。

要做的最有效的方法是向數據對象添加一個新值，以保存所需的圖標/符號，以便在需要時使用此值。

因此，在保存項目功能中，您將保存遠離名稱的圖標/符號值。

$scope.saveItem = function(item) { 
    var index = $scope.data.indexOf(item); 
    $scope.data[index].symbol= "&#10003;"; 
};

然後，您可以顯示您的輸出，但是您希望如下所示。

<div ng-bind-html="selectedItem.symbol + ' ' + selectedItem.name"></div>

以後的數據看起來像。

$scope.data = [{ 
    'name' : 'Item 1', 
    'color': 'red', 
    'symbol': '&#10003;' 
}];

要在選擇選項中渲染符號，您需要使用自定義過濾器，如下所示。

app.filter('renderSymbol', function(){ 
    return function(val){ 
    var symbol = document.createElement('div'); 
    symbol.innerHTML = val; 
    return symbol.childNodes[0].nodeValue; 
    }; 
});

該過濾器將採取每個選項的值，並把它們放在一個div中，它將爲您呈現符號。

該過濾器是在你的NG-選項一起使用，如下所示：

ng-options="item as (item.symbol + ' ' + item.name | renderSymbol) for item in data"

輸出：

這裏是一個工作示例：Plunker

來源

2017-09-08 16:06:36 furkick

使用NG選項添加glyphicon圖標爲「拯救」所選項目

回答

相關問題