Как фильтровать список в 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>

У меня есть объект var persons = {...}, и я показываю его как

<div ng-repeat="person in persons">
  {{person.name...}}
</div>

Как создать фильтр, чтобы каждый раз, когда я нажимаю на одну из кнопок, список будет отфильтрован?

Я попытался добавить ng-repeat="person in persons | filter:filterPersons" и на стороне script:

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

но это только один случай использования (как я могу фильтровать другим именем?) - другими словами - Как подключить ссылки к фильтру?

Ответы

Ответ 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. Скриншот здесь. Вы также можете создать новый фильтр, но это решение намного лучше.

Ответ 2

Мой ответ очень похож на Caio's. Я просто хотел показать, как отфильтровать существующий массив.

В моем 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 и ищет td с именем drink.name. В каждом ng-клике я могу установить значение имени для поиска. Поэтому каждый заголовок, содержащий соду или энергию, можно фильтровать через.