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>

在角度我有一个基本的控制器，用数据填充人变量。我的问题非常简单，但我之前没有找到类似的问题 - 如何给ui-select所选元素一个特定的css背景颜色？

我会将此随机生成的颜色存储在角度控制器中。

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

Answer 1

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

<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}}。诀窍是我需要更改所选范围的父级的背景颜色，所以我需要一个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;
    }
};

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：如何更改所选元素的背景颜色？

2 个答案: