Html ui选择：如何更改所选元素的背景色？

我将ui选择与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>

{{$item.username}

在angular中，我有一个基本控制器，用数据填充people变量。我的问题很简单，但我以前没有发现类似的问题——如何为ui select selected元素指定特定的css背景色

我会将随机生成的颜色存储在angular controller中

---

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

我用一种丑陋的方式解决了这个问题，但它奏效了。首先，我在select事件中向ui select元素添加了一个函数调用（在选择项目时发生）：

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

当用户删除某个元素时，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;
    }
};

vm.onRemove=函数（x）{
对于（变量i=0；i

我用一种丑陋的方式解决了这个问题，但它确实有效。首先，我在select事件中向ui select元素添加了一个函数调用（在选择项目时发生）：

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

当用户删除某个元素时，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;
    }
};

vm.onRemove=函数（x）{
对于（变量i=0；i

现在已经很晚了，但我认为解决这个问题要干净一点

要点是添加一些css以覆盖和清除默认背景，然后删除ng样式以将颜色应用于ui选择

ng style=“{'background color'：someVariable==true？'#color1'：'#color2'}”

.select2选项，.select2箭头{
背景图像：无！重要；
背景色：透明！重要；
}
.选择2选项，.选择2箭头{
背景图像：无！重要；
}
.选择2箭头{
左边框：0px！重要；
}   
。选择2使其处于活动状态{
边界顶部：无；
}
{{$item.username}

现在已经很晚了，但我认为解决这个问题要干净一点

要点是添加一些css以覆盖和清除默认背景，然后删除ng样式以将颜色应用于ui选择

ng style=“{'background color'：someVariable==true？'#color1'：'#color2'}”

.select2选项，.select2箭头{
背景图像：无！重要；
背景色：透明！重要；
}
.选择2选项，.选择2箭头{
背景图像：无！重要；
}
.选择2箭头{
左边框：0px！重要；
}   
。选择2使其处于活动状态{
边界顶部：无；
}
{{$item.username}

您需要在选择后设置背景色，还是在打开和显示所选项目时设置背景色？选择后：）是否为每个所选项目设置特定的颜色？是的，每个项目都应该有自己独特的颜色。这不完全是您想要的，但您可以替换

{$item.username}

by

{{$item.username}

。这将根据您必须在控制器范围中定义的函数

getColorFor（…）

为每个项目赋予颜色。您也可以设置背景色，但为了使其美观，您需要修改

ui select match

元素的背景色-这当然是可能的，但不是那么简单…您需要在选择后设置背景色，还是在打开并显示所选项目时设置背景色？选择后：）是否您想为每个选定的项目指定一种特定的颜色吗？是的，每个项目都应该有自己独特的颜色。这不完全是您想要的颜色，但您可以用

{{$item.username}}

替换

{$item.username}

。这将根据您必须在控制器范围中定义的函数

getColorFor（…）

为每个项目赋予颜色。您也可以设置背景色，但为了使背景色更美观，您需要修改

ui选择match

元素的背景色-这当然是可能的，但不是那么简单。。。

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

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