如何使用多个链接过滤 AngularJS 中的列表答案

【问题标题】：How to filter a list in AngularJS using several links如何使用多个链接过滤 AngularJS 中的列表
【发布时间】：2013-01-01 01:01:11
【问题描述】：

我已经阅读了很多关于如何过滤列表的教程，但找不到我的简单用例的示例。

我有几个按钮，例如

<a href="#" id="filter-by-name">Name</a>
<a href="#" id="filter-by-age">Age</a>
<a href="#" id="filter-by-height">Height</a>

我有 var persons = {...} 对象，我将其显示为

<div ng-repeat="person in persons">
  {{person.name...}}
</div>

如何创建过滤器，以便每次单击其中一个按钮时列表都会被过滤？

我已尝试添加ng-repeat="person in persons | filter:filterPersons" 并在脚本方面写：

$scope.filterPersons(person){
  if (person.name == "John")
    return person;
}

但这只是一个用例（如何用另一个名称过滤？） - 换句话说 - 如何将链接连接到过滤器？

【问题讨论】：

您可以在单击链接时在范围内设置一个变量，并在您的过滤器函数中使用此变量。
怎么样？像这样 ng-repeat="person in Persons | filter:filterPersons({{myParam}})"？

标签： javascript html filter angularjs

【解决方案1】：

您可以将过滤器绑定到范围变量，就像处理任何其他事情一样。因此，您只需在用户单击并将其绑定到 ng-repeat 过滤器参数时将适当的过滤器设置为范围。见：

<div ng-app>
  <span ng-click="myFilter = {type: 1}">Type 1</span> | 
  <span ng-click="myFilter = {type: 2}">Type 2</span> |
  <span ng-click="myFilter = null">No filter</span>
  <ul ng-controller="Test">
    <li ng-repeat="person in persons | filter:myFilter">{{person.name}}</li>
  </ul>
</div>

function Test($scope) {
  $scope.persons = [{type: 1, name: 'Caio'}, {type:2, name: 'Ary'}, {type:1, name: 'Camila'}];
}

请注意，当用户单击过滤器时，myFilter 会发生更改，并且它已绑定到 ng-repeat 过滤器。 Fiddle here。您也可以创建一个新的过滤器，但这个解决方案要好得多。

【讨论】：

这太棒了。我在尝试用这个创建一个正则表达式时遇到了困难。
我必须使用 myFilter = {} 而不是 myFilter = null 才能使其正常工作，也许是来自 Angular 的更新？
那么这个“取消点击/取消过滤”是如何实现的呢？
在第四行，我们将 myFilter 设置为 null 或空对象。

【解决方案2】：

我的回答与 Caio 的非常相似。我只是想展示如何过滤掉现有的数组。

在我的 ng-repeat 中，我有一个通过单词的搜索过滤器。我希望标签查找字符串匹配。所以我添加了一个额外的过滤器

 <tr class="unEditableDrinks" ng-repeat="drink in unEditableDrinkList | orderBy:'-date'|limitTo:400|filter:search |filter:myFilter">
    <td>[[drink.name]]</td>

我只有表格的顶部，但这应该显示策略。名为 myFilter 的第二个过滤器附加到下面的按钮。

<div class="btn-group" role="group">
   <button type="button" class="btn btn-primary" ng-click="myFilter={name:'soda'}">Soda</button>
</div>
<div class="btn-group" role="group">
    <button type="button" class="btn btn-primary" ng-click="myFilter={name:'energy'}">Energy Drinks</button>
</div>

在每个按钮上，我都可以添加一个 ng-click，它会通过 myFilter 并使用drink.name 搜索 td。在每次 ng-click 中，我可以将 name 的值设置为 search。所以每一个含有苏打水或能量的标题都可以被过滤掉。

【讨论】：