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

【问题标题】：Add different CSS to every option of ui-select为 ui-select 的每个选项添加不同的 CSS
【发布时间】：2017-05-31 19:09:59
【问题描述】：

我想为图片中给出的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>

但是当我选择该项目时，css 不会持续存在。

【问题讨论】：

标签： html css angularjs ui-select

【解决方案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

【讨论】：

所选项目仍然没有颜色。
@maenolis 感谢您的关注，我已更新（忘记保存）
@AayushiJain 没问题，很高兴能帮上忙！
@Taysumi 哦！不确定 IE 11 会出现什么问题。您可以 Ctrl+F5 plunker 或以私密/隐身模式打开吗？
@tanmay 哦，好吧。我真的不在乎说实话。我在我的手机上用 chrome 试了一下，效果很好。我使用 IE 只是因为我必须（公司）。很好的解决方案。 +1