How to use ng-class in select with ng-options in Angular 1.4 and higher

Question

My problem is similar to the one of the following post : How to use ng-class in select with ng-options

I want to be able to customize specific options in my select using CSS. If I resume the example used, I have an array of persons like this :

var persons = [
{Name:'John',Eligible:true},
{Name:'Mark',Eligible:true},
{Name:'Sam',Eligible:false},
{Name:'Edward',Eligible:false},
{Name:'Michael',Eligible:true}
];

Now I want to be able to write some code like the following to display differently one Elligible person to another not Elligible :

<select ng-model="Blah" ng-options="person.Name for person in persons" ng-class="{'is-elligible': person.Elligible}"></select>

But in this code, I don't have access to the person variable in the ng-class tag.

The thing is in the other post, the solution was based on a cutom directive which works well in angular before the 1.4. Now this solution doesn't work anymore.

A possible solution is also not to use ng-options but to use ng-repeat in an option tag. But I would like to still work with ng-options because it seems faster and easier to use.

So if anybody have any solution to do this with angular 1.4 and higher, it would be great to share it ! :)

Thanks in advance

Answer 1

You cannot do it with plain ng-options.

You should use ng-repeat or custom directive to achieve desired behaviour. In case if case such simple as you described i recommend you using ng-repeat as it's common approach to achieve that behaviour.

Consider diving into details of already existed answer: Customize ng-options selection look and it would answer your question.

p.s. Didn't catch your point of using ng-repeat, because in particular case it's easier to use already existed directive than creating new one and adding unit tests to it, where you 've got idea that ng-repeat is slower...