CODEWITHSUNDEEP
angularjs
FDavidov
FDavidov

Reputation: 3667

Angularjs select with entries in different colors

I want to deploy a select box where entries would be colored differently depending on the data. Here is a sample HTML:

<select class="form-control" ng-model="New_Request.SN" id="SN" style="width:140px">
    <option ng-repeat="One_Board in Child_Boards" value="{{One_Board.SN}}"> 
        <div ng-style="({{One_Board.Status}} == 'Y' ? font-color:black : font-color:red)">{{One_Board.SN}}</div>
    </option>
</select>

So, each entry has the structure {"SN":"<value>","Status":"<status>"}. So, each entry whose status is 'Y' would be shown in black, and any entry with a status different from 'Y' would be shown in red.

I can't figure out what should be the correct syntax.

Upvotes: 1

Views: 112

Answers (1)

JanP
JanP

Reputation: 1581

Please try this:

<select class="form-control" ng-model="New_Request.SN" id="SN" style="width:140px">
    <option ng-repeat="One_Board in Child_Boards" value="{{One_Board.SN}}" ng-class="{redcolor: One_Board.Status != 'Y'}">
        {{One_Board.SN}}
    </option>
</select>

And in your CSS:

option {
    color: black;
}
.redcolor {
    color: red;
}

But maybe changing font-color to color alone will do the trick as well ;-)

Upvotes: 1

Related Questions