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

Posted 2023-02-27

【中文标题】如何使用多个链接过滤 AngularJS 中的列表

【英文标题】：How to filter a list in AngularJS using several links

【发布时间】：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)"？

【参考方案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。所以每一个含有苏打水或能量的标题都可以被过滤掉。