CODEWITHSUNDEEP
htmlcssangularjsui-select
Aayushi Jain
Aayushi Jain

Reputation: 2879

Add different CSS to every option of ui-select

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

enter image description here

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.

Upvotes: 0

Views: 972

Answers (1)

tanmay
tanmay

Reputation: 7911

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>

working plunker

Upvotes: 4

Related Questions