javascript - Angularjs根据输入查询动态更改CSS类的最佳方法

Question

在 AngularJS phonecat 教程中，有一个输入框用于对 ng-repeat 应用过滤器。这非常适合返回子集数组以显示在屏幕上。

代码如下所示：

Search: <input ng-model="query">
  <ul class="phones">

...

    <li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">
      <a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
      <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
      <p>{{phone.snippet}}</p>
    </li>
  </ul>

我想知道将 CSS 类动态添加到匹配元素的最佳方法是什么。一个示例用例是为所有匹配元素添加背景颜色（样式 .matching{}）。

比较 ng-class 中的查询文本不起作用：

        <li ng-repeat="phone in phones" class="thumbnail">
      <a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
      <a href="#/phones/{{phone.id}}" ng-class="{'matching': phone.name.indexOf(query) != -1 }">{{phone.name}}</a>
      <p>{{phone.snippet}}</p>
    </li>
  </ul>

我是 Angular 的新手，我只是想了解一下这个框架。我是否必须以某种方式将查询文本绑定到元素才能进行比较？更好的方法是通过自定义指令来处理这个问题吗？

任何帮助表示赞赏 - 谢谢！

Answer 1

尝试将类设置为控制器中的函数。ng-class="GetMatchingClass(phone)"

$scope.GetMatchingClass= function(phone){
    if(phone.name.indexOf(query) != -1 ){return "matching"}
    return "";
}

Answer 2

<a href="#/phones/{{phone.id}}" ng-class="{'matching': phone.name==query }">{{phone.name}}</a>

这应该可以做到完全匹配。