Javascript Angularjs基于输入查询动态更改CSS类的最佳方法

在AngularJS中，有一个输入框，用于对ng repeat应用过滤器。这对于返回要在屏幕上显示的子集数组非常有用

下面是代码的样子：

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

搜索：

{{phone.snippet}

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

比较ng类中的查询文本无效：

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

{{phone.snippet}

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

---

感谢您的帮助-谢谢

尝试将类设置为控制器中的函数

ng class=“GetMatchingClass（电话）”

---

这对于精确匹配应该是可行的。

这最终奏效了-谢谢！我猜ng类也有双向数据绑定，所以我不必将每个

链接到ng Model='query'。

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

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

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