ui-select的每个选项添加不同的CSS

Question

我想为图中给出的 ui-select 的每个选项添加不同的 CSS，以便每个选项显示为不同的 text-color

这是带有代码的 Plunk：Plunk

我也尝试过给出不同的 li，如此处所示

<ui-select-choices repeat="item in (itemArray) track by item.id">
   <li style="color:green;">Pending</li>
   <li style="color:red;">Rejected</li>
   <li style="color:blue;">Approved</li>
</ui-select-choices>

但是当我 select 项目时 css 将不会持续存在。

Answer 1

您可以为数组中的每个项目关联颜色。像这样：

$scope.itemArray = [
    {id: 1, name: 'Pending', color: 'green'},
    {id: 2, name: 'Rejected', color: 'red'},
    {id: 3, name: 'Approved', color: 'blue'},
];

然后在ui-select,

<ui-select-match>
    <span style="color: {{$select.selected.color}}" ng-bind="$select.selected.name | limitTo: 20"></span>
</ui-select-match>

<ui-select-choices repeat="item in (itemArray) track by item.id">
    <span style="color: {{item.color}}" ng-bind="item.name"></span>
</ui-select-choices>

working plunker

ui-select的每个选项添加不同的CSS

Add different CSS to every option of ui-select

html

css

angularjs

ui-select