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

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过滤器.小提琴这里.您也可以创建一个新的过滤器,但这个解决方案要好得多.