Dynamically Filtering Lists in AngularJS

Creating lists with AngularJS is an easy process with the ngRepeat directive. But what if the user wants to be able to filter that list using a dropdown menu? Well that's not too difficult either, let's look at what HTML we'll need to filter a list of cars by color.


<body ng-controller="appCtrl as ctrl">
  <div class="filters">
    <div>
      <select name="filter" id="filter" ng-model="filter" ng-options="color for color in carColors"></select>
    </div>
    <div>
      <a ng-click="resetFilter()" class="filter-reset">Reset Filter</a>
    </div>
  </div>
  <div class="list">
    <p class="car" ng-repeat="car in cars | filter: filter">{{car.make}} {{car.model}} | {{car.color}}</p>
  </div>
</body>

The important pieces you see here are the select box with the car colors, the reset filter link and the filter: filter bit in the ng-repeat. Also, notice how we use the same variable name of color on both the list and the select options so that the system could match the elements properly. Now let's see how we set up our JS.


angular.module('app', [])
.controller('appCtrl', function($scope) {
// define list of cars
$scope.cars = [
  {make:"Dodge",color:"Blue",model:"Dakota"},
  {make:"Chevy",color:"Black",model:"Aveo"},
  {make:"Honda",color:"Black",model:"Accord"},
  {make:"Toyota",color:"Red",model:"Corolla"},
  {make:"Dodge",color:"Blue",model:"Stratus"},
  {make:"Toyota",color:"White",model:"Tacoma"},
  {make:"Ford",color:"Blue",model:"Focus"},
  {make:"GMC",color:"Red",model:"Sierra"},
  {make:"Dodge",color:"White",model:"Dakota"},
  {make:"Ford",color:"Black",model:"F150"}
];

// define list of items
$scope.carColors = ["Black","Blue","Red","White"];

// initialize filter object
$scope.filter = {};

// reset the filter
$scope.resetFilter = function() {
  // set filter object back to blank
  $scope.filter = {}; 
}
});

The first two pieces are setting up our list and our color options, you can probably achieve this in a dynamic way, but for the demo we will do so manually. Next we need to tell $scope.filter that it is an empty object, we let the ng-model="filter" on the select element set the value. Then when a user clicks the reset filter link we will reset the $scope.filter variable to be blank to show all entries.

You can check out the demo I created on CodePen to see how it all plays together.

See the Pen Angular List Filter by Jeff Shamley (@jshamley) on CodePen.

Add new comment

Comments

this code working properly thanks for sharing useful information. hope you post information angularjs 2. once again thanks to Angular Js Expert

Regards,,
Mathan

Nice blog!! Thanks for sharing interesting information angular js hope you share angular 2 vs angular 1
Regards..
Angular Js Training

thanks!! for sharing your code as aangularjs beginner it help me lot to easy learn and understanding code thanks for your blog

Thank you for posting this, I been searching for this and here I found a exact example i been looking for,

Thanks , use ful info on angularjs.

"angularjs.

Thanks for this code.

I have a question , where the function "changeFilter()" is declared , and in this example is this useful ?

Regards.

You are correct. Thanks for finding that! I have updated the post and the pen to reflect this change.

This is very useful, thanks.
Do you have any insight on how it would work with checkboxes rather than a dropdown?

You could set up the filter object as an array instead, then when a checkbox is selected add that information to the array. In your ng-repeat you could call a function that returns true if the value is inside the array, using indexOf or something similar.

If you have a code sample I'd be happy to help you figure it out.

This is very useful, thanks.
Angular Js