sooon sooon - 4 months ago 79
AngularJS Question

Angular - dropdown menu background color

I have this code in

html
using
Angular
:

<select name="singleSelect" ng-model="priority.APME" style="width:100%;" ng-change="changedValue(priority.APME,$index,priority)" >
<option value="" selected>Main Elements</option>
<option ng-repeat="me in mainelements" value="{{$index}}" ng-disabled="me.optiondisable == true">{{me.Title}}</option>
</select>


Now my client want to put different color for different options dynamically(option1 is green, option2 is red,...).

I googled and test with some code:

<option ng-repeat="me in main elements" style="background: #5456e3 !important;" value="{{$index}}" ng-disabled="me.optiondisable == true">{{me.Title}}</option>


and

<option ng-repeat="me in main elements" style="background-color: #5456e3 !important;" value="{{$index}}" ng-disabled="me.optiondisable == true">{{me.Title}}</option>


Both of the above not working. How can I achieve that?

Answer

You would have to assign a color property to incoming array, then use ng-style to bind that color to the option.

<select>
   <option value="" selected>Main Elements
   </option>
   <option ng-repeat="me in mainelements"
           ng-style ="{'background-color': me.Color}">{{me.Title}}
   </option>
</select>

Working Plunker