How to filter a list in AngularJS using several links

angularjs, filter, html, javascript

Solution

You can bind your filter to scope variables as you do with any other thing. So all you need is to set the appropriated filter to the scope when the user click and bind it to the `ng-repeat` filter param. See:

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

Notice that the `myFilter` is changed when the user clicks the filter, and that it's bound to the `ng-repeat` filter. Fiddle here. You could also create a new filter, but this solution is far better.

Problem

I have been going over a lot of tutorials on how to filter a list and can't find an example for my simple use-case. I have several buttons such as ``` <a href="#" id="filter-by-name">Name</a> <a href="#" id="filter-by-age">Age</a> <a href="#" id="filter-by-height">Height</a> ``` I have `var persons = {...}` object and I display it like ``` <div ng-repeat="person in persons"> {{person.name...}} </div> ``` How do I create a filter so each time I will click on one of the buttons the list will be filtered ? I have tried adding`ng-repeat="person in persons | filter:filterPersons"` and on the script side to write: ``` $scope.filterPersons(person){ if (person.name == "John") return person; } ``` but this is only one use-case (how can I filter by another name?) - in other words - How do I connect the links to the filter?

Original source