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

Question

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

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

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

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

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