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

<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 addingng-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?

you can set a variable on scope when a link is clicked and use this variable inside your filter function. — akonsu
– akonsu, Commented Jan 17, 2013 at 13:56
how? like this ng-repeat="person in persons | filter:filterPersons({{myParam}})"? — Alon
– Alon, Commented Jan 17, 2013 at 14:04

Caio Cunha · Accepted Answer · 2013-01-17 14:21:38Z

37

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.

answered Jan 17, 2013 at 14:21

Caio Cunha

23.4k6 gold badges81 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Winnemucca Over a year ago

This was awesome. I was having difficulty trying to create a reg ex with this.

Nicolas Charvoz Over a year ago

I had to do myFilter = {} instead of myFilter = null in order to make it work, maybe an update from Angular ?

ericjam Over a year ago

How does this "unclick/unfilter" then?

Caio Cunha Over a year ago

That's on the fourth line, where we set myFilter to null or empty object.

Winnemucca · Accepted Answer · 2015-07-03 16:56:27Z

My response is very similar to Caio's. I just wanted to show how to filter out an existing array.

In my ng-repeat I have a search filter that goes through the words. I wanted tabs to look for a string match. So I added a additional filter

 <tr class="unEditableDrinks" ng-repeat="drink in unEditableDrinkList | orderBy:'-date'|limitTo:400|filter:search |filter:myFilter">
    <td>[[drink.name]]</td>

I only have the top part of my table but this should show the strategy. The second filter called myFilter is attached to the buttons below.

<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>

On each button I am able to add a ng-click that goes through myFilter and searches the td with drink.name. In each ng-click I can set the value of name to search. So every title containing soda or energy can be filtered through.

Collectives™ on Stack Overflow

How to filter a list in AngularJS using several links

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related