ui-select: 如何改变selected元素的背景颜色？

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 中，我有一个基本控制器，可以用数据填充 people 变量。我的问题很简单，但我没有发现任何类似的问题 - 如何给 ui-select selected 元素一个特定的 css 背景颜色？

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

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

Answer 1

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

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

我在 span 元素上添加了一个 html id 属性，值为 {{$item.$$hashKey}}。诀窍是我需要更改 selected 跨度的父级的背景颜色，所以我需要一个 id 以便我可以引用正确的父级。如果有更优雅的方法，请告诉我。

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

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

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

中

当用户删除某个元素时，for 循环会遍历所有 selected 人并确保每个 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-style 以将颜色应用于 ui select

ng-style="{ 'background-color': someVariable === true ? '#color1' : '#color2'}"

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

ui-select: 如何改变selected元素的背景颜色？

ui-select: How to change background color of selected element?

html

css

angularjs

drop-down-menu

ui-select