ui-select：選択した要素の背景色を変更するにはどうすればいいですか？

Question

私は、anglejs v1.5と組み合わせてui-selectを使用しています。私のHTMLコードは次のとおりです。

私は、人々の変数をデータで埋める基本的なコントローラーを持っています。私の質問はかなりシンプルですが、前に尋ねられたようなものは見つかりませんでした。どのように選択した要素に特定のCSSの背景色を与えるのですか？

このランダムに生成された色を角度コントローラーに格納します。

アイデア？どんな助けでも大歓迎です。

Answer 1

私はこの問題を醜い方法で解決しましたが、機能します。私は{{$項目の値とspan要素上のHTML IDプロパティを追加

<ui-select on-select="MyCtrl.onSelected($item);" on-remove="MyCtrl.onRemove($item);" multiple sortable="true" ng-model="MyCtrl.selectedPersons" theme="bootstrap"> 

<ui-select-match placeholder="Select or search a person in the list..."><span id="{{$item.$$hashKey}}">{{$item.username}}</span></ui-select-match> 

<ui-select-choices repeat="item in MyCtrl.people | filter: $select.search"> 
    <div ng-bind-html="item.username | highlight: $select.search"></div> 
    <!--<small ng-bind-html="item.email | highlight: $select.search"></small>--> 
</ui-select-choices> 

</ui-select> 

$：最初のIは、選択イベントにUI選択要素（アイテムが選択されたときに発生する）への関数呼び出しを追加しました。 $ hashKey}}。トリックは、選択したスパンの親の背景色を変更する必要があるため、適切な親を参照できるようにIDが必要でした。これを行うよりエレガントな方法がある場合は、私に教えてください。

最後に、onSelected方法は、コントローラに実装されている：

vm.onSelected = function(x) { 
    document.getElementById(x.$$hashKey).parentElement.parentElement.style.backgroundColor = x.color; 
}; 

この方法は、選択された要素の親の背景色を変更します。各オブジェクトの色は、既にオブジェクトプロパティに格納されています。

ユーザーが特定の要素を削除すると、forループがすべての選択されたユーザーに適用され、各DOM要素の色がユーザーが特定の要素を削除する前と同じになるようにします。

vm.onRemove = function(x) { 
    for (var i = 0; i < vm.selectedPersons.length; i++) { 
     var x = vm.selectedPersons[i]; 
     document.getElementById(x.$$hashKey).parentElement.parentElement.style.backgroundColor = x.color; 
    } 
};