How to filter a list in AngularJS using several links

Question

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

&         


        

Answer 1

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:

  Type 1 | 
  Type 2 |
  No filter
  

    
{{person.name}}
  

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.