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

Question

在 AngularJS 中 phonecat tutorial ，有一个输入框，用于将过滤器应用于 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 的新手，只是想了解一下这个框架。我是否必须以某种方式将查询文本绑定(bind)到元素以便进行比较？更好的方法是通过自定义指令来处理这个问题吗？

感谢任何帮助 - 谢谢!

Answer 1

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

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