ng-class not working with UI select properly

Question

I want to add a class to the specific LI element of UI select through ng-class but i am not able to do so.

Example -

 <ui-select  ng-model="selected" theme="select2">
  <ui-select-match placeholder="Select">{{$select.selected.name}}
  </ui-select-match>   
 <ui-select-choices  repeat="student in studentList | filter:  $select.search" ng-class="{{student.name}}  == 'ABC' ? 'found' : 'not_Found' ">     {{student.name}}          
</ui-select-choices>   
 </ui-select>

Please help me if anyone as any idea

score 1 · Answer 1 · answered Aug 10 '16 at 16:25

You should not use interpolated values with directives:

You should avoid dynamically changing the content of an interpolated string (e.g. attribute value or text node). Your changes are likely to be overwriten, when the original string gets evaluated. This restriction applies to both directly changing the content via JavaScript or indirectly using a directive.

Source: Docs

You should try this instead:

<ui-select  ng-model="selected" theme="select2">
    <ui-select-match placeholder="Select">{{$select.selected.name}}
    </ui-select-match>   
    <ui-select-choices repeat="student in studentList | filter: $select.search" ng-class="student.name == 'ABC' ? 'found' : 'not_Found' ">
        <span ng-bind="student.name"></span>
    </ui-select-choices>   
 </ui-select>

Note: also changed the other interpolation to ngBind directive as it is a bit faster.

score 1 · Answer 2 · answered Mar 12 '18 at 10:58

I placed my ng-class directive in the parent of the ui-select directive then used the class selector in my css file to select a child element inside ui-select. Exemple:

<div ng-class="{'some-class': condition}">
 <ui-select...></ui-select>
</div>

CSS:

.some-class a { border-color: red}

Hope it helps!

ng-class not working with UI select properly

2 Answers2