ng-optionsを使用して「保存済み」選択項目にグリフコンアイコンを追加

このシナリオがある場合はどうすればいいですか？ng-optionsを使用して「保存済み」選択項目にグリフコンアイコンを追加

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

がこれです....

現在のモデル「アイテム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-optionsを使用して「保存済み」選択項目にグリフコンアイコンを追加

答えて

関連する問題