如何使用几个链接在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过滤器。在这里摆弄。您也可以创建一个新的过滤器，但是这种解决方案要好得多。