I want to add different CSS to every option of ui-select as given in the image so that every option is shown in different text-color
Here is the Plunk with the code: Plunk
I also tried with giving different li as shown here
<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>
but when I select the item the css won't persist.
You could have associated color for each item in the array. Like this:
$scope.itemArray = [
{id: 1, name: 'Pending', color: 'green'},
{id: 2, name: 'Rejected', color: 'red'},
{id: 3, name: 'Approved', color: 'blue'},
];
And, then in the 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>
