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

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

我有几个按钮，比如

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

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

我已尝试添加

ng repeat=“person in persons | filter:filterPersons”

在脚本方面写：

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

---

但这只是一个用例（我如何用另一个名称过滤？）-换句话说-我如何将链接连接到过滤器？您可以像处理任何其他事情一样将过滤器绑定到范围变量。因此，当用户单击并将其绑定到

ng repeat

filter参数时，您只需将适当的筛选器设置为作用域。见：

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

---

请注意，当用户单击过滤器时，

myFilter

会发生更改，并且它会绑定到

ng repeat

过滤器。您也可以创建一个新的过滤器，但这个解决方案要好得多。

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

在我的ng repeat中，我有一个搜索过滤器，可以遍历单词。我想让tabs查找字符串匹配。所以我增加了一个额外的过滤器

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

[[drink.name]]

我只有我桌子的顶部，但这应该显示策略。第二个名为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单击，它通过myFilter搜索td，并使用drink.name。在每次ng单击中，我可以设置要搜索的名称的值。因此，每个包含苏打水或能量的标题都可以过滤。

单击链接时，可以在作用域上设置一个变量，并在过滤函数中使用该变量。如何？像这样ng repeat=“person in persons | filter:filterPersons（{{{myParam}}}）”？这太棒了。我很难用这个来创建一个注册表。我必须做

myFilter={}

而不是

myFilter=null

来让它工作，也许是Angular的更新？那么这个“unclick/unfilter”是怎么做的呢？在第四行，我们将myFilter设置为null或空对象。

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