UI选择:如何更改选定元素的背景颜色

Question

我正在使用ui-select与angularJS v1.5结合使用。这是我的HTML代码：

<ui-select multiple sortable="true" ng-model="RealtimeCtrl.selectedPersons" theme="bootstrap">
<ui-select-match placeholder="Select or search a person in the list...">{{$item.username}}</ui-select-match>
<ui-select-choices repeat="item in RealtimeCtrl.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>

在Angular I中，有一个基本控制器，该控制器填充了人物变量的数据。我的问题很简单，但我以前没有发现任何类似的问题 - 如何给UI选择选定的元素特定的CSS背景颜色？

我将将这种随机生成的颜色存储在角控制器中。

有什么想法吗？任何帮助将不胜感激。

Answer 1

我以丑陋的方式解决了这个问题，但它起作用。首先，我在SELECT事件上向UI选择元素添加了函数调用（在选择项目时发生）：

<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>

我在跨度元素上添加了一个HTML ID属性，其值{{$item。$$ hashkey}}。诀窍是我需要更改所选跨度父母的背景颜色，以便我需要一个ID，以便可以参考适当的父。如果有一种更优雅的方法可以做到这一点，请让我知道。

最后，在控制器中实现了Onselected方法：

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

此方法更改所选元素父的背景颜色。每个对象的颜色已经存储在对象属性中。

当用户删除某个元素时，循环在所有选定的人上运行，并确保每个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;
    }
};

Answer 2

此时很晚，但我认为这是一个清洁的问题。

要点是添加一些CSS以覆盖并清除默认背景，然后删除NG风格以将颜色应用于UI选择

ng-style =＆quot; {'background-color'：somevariable ===是真的吗？'＃color1'：'＃color2'}＆quot＆quort'

  <style>
        .select2-choice,  .select2-arrow { 
            background-image: none !important;
            background-color: transparent !important;
        }
       .select2-choice, .select2-arrow {
            background-image: none !important;
        }
        .select2-arrow {
            border-left: 0px !important;
        }   
       .select2-drop-active {
            border-top: none;
        }
    </style>
<ui-select  ng-style="{ 'background-color': someVariable === true ? '#color1' : '#color2'}" multiple sortable="true" ng-model="RealtimeCtrl.selectedPersons" theme="bootstrap">
<ui-select-match placeholder="Select or search a person in the list...">{{$item.username}}</ui-select-match>
<ui-select-choices repeat="item in RealtimeCtrl.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>