Angularjs ng-repeat 过滤器显示整个数组，但设置过滤后的样式

【问题标题】：Angularjs ng-repeat filter display the whole array but style the filtered onesAngularjs ng-repeat 过滤器显示整个数组，但设置过滤后的样式
【发布时间】：2015-05-08 00:37:09
【问题描述】：

我需要在 ng-repeat 上应用一个过滤器，它不会隐藏不匹配的项目，但它会为它们应用自定义样式，例如不同的颜色。

<ul ng-repeat="friend in friends | filter:query">
  <li>{{friend.name}}</li>
</ul>

因此，当我应用过滤器时，我需要查看所有名称，但过滤后的名称不同。

【问题讨论】：

标签： angularjs angularjs-ng-repeat angularjs-filter

【解决方案1】：

您可以使用ng-class 做您想做的事，并去掉filter 部分。示例：

<ul ng-repeat="friend in friends">
  <li ng-class="friend.name.indexOf('Billy') >= 0 ? 'match' : 'no-match'">
    {{ friend.name }}
  </li>
</ul>

您可以轻松地使搜索部分动态化，但 query 只是一个用于测试的简单字符串：

<ul ng-repeat="friend in friends">
  <li ng-class="friend.name.indexOf(query) >= 0 ? 'match' : 'no-match'">
    {{ friend.name }}
  </li>
</ul>

这只是一个例子。如果没有关于您的查询的任何其他详细信息，我无法完全回答您的问题。

【讨论】：