ng-class 不能正确使用 UI 选择答案

【问题标题】：ng-class not working with UI select properlyng-class 不能正确使用 UI 选择
【发布时间】：2018-03-12 18:58:35
【问题描述】：

我想通过 ng-class 向 UI 选择的特定 LI 元素添加一个类，但我无法这样做。

例子-

 <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>

如果有人有任何想法，请帮助我

【问题讨论】：

标签： ng-class ui-select

【解决方案1】：

您不应该在指令中使用插值：

您应该避免动态更改内插字符串的内容（例如属性值或文本节点）。当原始字符串被评估时，您的更改可能会被覆盖。此限制适用于通过 JavaScript 直接更改内容或使用指令间接更改内容。

来源：Docs

你应该试试这个：

<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>

注意：也将其他插值更改为 ngBind 指令，因为它有点faster。

【讨论】：

【解决方案2】：

我将 ng-class 指令放在 ui-select 指令的父级中，然后使用我的 css 文件中的类选择器在 ui-select 中选择一个子元素。示例：

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

CSS：

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

希望对你有帮助！

【讨论】：