Question

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

我有几个按钮，例如

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

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

Answer 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已绑定到{{1}}过滤器。 Fiddle here。您也可以创建一个新的过滤器，但这个解决方案要好得多。

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

在每个按钮上，我可以添加通过myFilter的ng-click并使用drink.name搜索td。在每次ng-click中，我可以设置要搜索的名称的值。因此，每个包含苏打或能量的标题都可以通过过滤。

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

2 个答案: