How to use ng-class in select with ng-options

2019-01-03 10:26发布

I have an array of Person objects

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

and i am using select with ng-options like this:

<select ng-model="Blah" ng-options="person.Name for person in persons"></select>

I want to show the record with Eligible:false in red color. So the problem is how do i use the ng-class in select inorder to achieve this? Since we are not using any option tag it wont work if i simply add ng-class in the select element itself.

9条回答
女痞
2楼-- · 2019-01-03 11:05

I know I am a bit late to the party, but for people who want to solve this with pure CSS, without using a directive you can make a css class like this:

    select.blueSelect option[value="false"]{
    color:#01aac7;
}

This css rule says : Find all elements with value = false with tag name 'option' inside every 'select' that has a class "blueSelect" and make the text color #01aac7; (a shade of blue)

In your case your HTML will look like this:

   <select class="form-control blueSelect" name="persons" id="persons1"
                ng-options="person as person.name for person in $ctrl.persons track by person.Eligible"
                ng-model="$ctrl.selectedPerson" required>
            <option disabled selected value="">Default value</option>
   </select>

The track by inside the ng-options is what will hold what to track the options by, or the "value" field of each option. Notice that depending on your project needs , you might have to do some tweaking to make this work as per your requirements.

But that's not going to work right when there's multiple options with the same value for the Eligible field. So to make this work, we create a compound expression to track by, that way we can have unique values to track by in each option. In this case we combine both fields Name and Eligible

So now our html will look like this

<select class="form-control blueSelect" name="persons" id="persons2"
                ng-options="person as person.name for person in $ctrl.persons track by (person.name + person.Eligible)"
                ng-model="$ctrl.selectedPerson" required>
            <option disabled selected value="">Default value</option>
   </select>

and our css :

    select.blueSelect option[value*="False"]{
     color:#01aac7;
 }

Notice the * next to value, this is a regular expression which means to find the word "False" somewhere in the value field of the option element.

Quick Edit You can also choose to disable the options with Eligible = False using the "disable when" in the ng-options expression , for example:

label disable when disable for value in array track by trackexpr

I'll leave how to use that in your case for you to find out ;-)

This works for simple css modifications, for more complex stuff you might need a directive or other methods. Tested in chrome.

I hope this helps someone out there. :-)

查看更多
Explosion°爆炸
3楼-- · 2019-01-03 11:07

I've found another workaround that was easier than adding a directive or filter, which is to add a handler for the onfocus event that applies the style.

angular.element('select.styled').focus( function() {
  angular.element(this).find('option').addClass('myStyle');
});
查看更多
Emotional °昔
4楼-- · 2019-01-03 11:14

I can't write this as a comment, due to reputation, but I have updated the plunker for the accepted answer to work with Angular 1.4.8. Thanks to Ben Lesh for the original answer, it helped me a lot. The difference seems to be that newer Angular generates options like this:

<option class="is-eligible" label="foo" value="object:1">foo</option>

so the code

option = elem.find('option[value=' + index + ']');

wouldn't be able to find the option. My change parses ngOptions and determines what field of item was used for the label, and finds the option based on that instead of value. See:

http://plnkr.co/edit/MMZfuNZyouaNGulfJn41

查看更多
登录 后发表回答