21

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

我有几个按钮，例如

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

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

4

2 回答 2

37

您可以将过滤器绑定到范围变量，就像处理任何其他事情一样。因此，您只需在用户单击并将其绑定到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过滤器。在这里拉小提琴。您也可以创建一个新过滤器，但此解决方案要好得多。

于 2013-01-17T14:21:38.833 回答
1

我的回答与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。所以每一个含有苏打水或能量的标题都可以被过滤掉。

于 2015-07-03T16:56:27.693 回答