My issue is similar to the problem described in this post : How to use ng-class in select with ng-options
I am looking to customize specific options in a select element using CSS. To illustrate, I have an array of people like so :
var persons = [
{Name:'John',Eligible:true},
{Name:'Mark',Eligible:true},
{Name:'Sam',Eligible:false},
{Name:'Edward',Eligible:false},
{Name:'Michael',Eligible:true}
];
What I want to achieve is to differentiate the display of an eligible person from that of an ineligible person by using code similar to this:
<select ng-model="Blah" ng-options="person.Name for person in persons" ng-class="{'is-eligible': person.Eligible}"></select>
However, the issue with this code is that I cannot access the person variable within the ng-class attribute.
In the other post, a solution was proposed based on a custom directive that worked in Angular versions before 1.4. Unfortunately, this solution no longer works.
One alternative solution could be to ditch the use of ng-options and instead use ng-repeat within an option tag. However, I prefer to stick with ng-options as it is faster and more convenient.
If anyone has a solution to achieve this in Angular 1.4 and above, I would greatly appreciate it if you could share it! :)
Thanks in advance