AngularJS Filters – All you need to know

Hey Guys,

In the previous post we’ve learned How To Write a Custom Directive.

In this post I’ll show you how to use filters in Angular JS. For beginners, filters may seem a little hard to understand at first but with time you`ll get the hang of them, and then you’ll understand the advantages of using them. The biggest benefit that you get from using filters is that they allow you to make your code more precise and help you transform your data easily, and since they are reusable you can use them in multiple places.

In this tutorial we’re going to look at three different variations of filters in Angular JS. Here they are.

 

1. Static Filters (Using Filters on a variable)

Static filters are basically filters that can only be used on a single variable of model data. For example, in situations like uppercasing or lowercasing a variable or transforming data into a particular format (as shown below).

<div>{{ “my string” | uppercase }}</div>
<div>{{ “my string” | lowercase }}</div>
<div>{{ 1500933461914 | date: 'dd-MM-yyyy' }}</div>

 

As you can see in the example above, these are the predefined static filters provided by Angular JS. You can also create your own custom static filters (as shown below), if you don’t want to use the standard ones.

var app = angular.module(“myApp”, []);
app.filter('capitalizeFirstLetter', function () {
  return function (item) {
      return item.charAt(0).toUpperCase() + item.slice(1);
  };
});

 

In the above example the filter is used in your app module. The Item returned is the value of the variable which is passed every time the filter is called and the function returned is a transformed value. A better example of this is given below.

 

 

2. Object Filters (Filters used in repeats)

Filters can also be used in loops in Angular JS, without much effort. Filters in Angular JS work the same when used in iteration and their syntax is almost the same as well (as depicted in the code snippet below).

app.controller(“myCtrl”, function () {
		this.people = [
	{ “name”: “John”, “age”: 23},
	{ “name”: “Linda”, “age”: 19 },
	{ “name”: “Craig”, “age”: 17},
	{ “name”: “Simon”, “age”: 21 },
	{ “name”: “Mary”, “age”: 15}
];
});

 

//Here we are creating a filter which will give us a list of all those people who are above 18 years of age

app.filter('filterAdults', function () {
return function (items) {
      		var adults = [];
    		angular.forEach(items, function(item) {
  			if(item.age > 18) {
        				this.push(item)
        			}
		}, adults);
    		return adults;
};
});

 

// Your HTML may look like this

<div ng-controller="myCtrl">
    <ul>
      <li ng-repeat="p in people | filterAdults">
        {{ p.name }} ({{p.age}})
      </li>
    </ul>
  </div>

 

You can find the complete example here.

In the above example we are simply taking an array, filtering it as per our needs and then returning a new array of values

 

3. Object Filters with argument (Filters used in repeats)

The third and final type of pre-defined filter available in Angular JS is an Object Filter which takes an argument as an input. Passing an argument to a filter in Angular JS is similar to the above example. We can also pass an argument from other models and the filter will work on it in run time. So here, instead of specifying the age as 18, we want the user to enter the age as input and on doing so, the filter will display a list of all the people who are above that age (as shown in the code snippet below).

//For that our HTML will look like this.

<div ng-controller="myCtrl">
    <input type=”text” ng-model=”inputAge”>
    <ul>
      <li ng-repeat="p in people | filterWithAge:inputAge">
        {{ p.name }} ({{p.age}})
      </li>
    </ul>
  </div>

 

Our custom filter implementation be as follows

app.filter('filterAdults', function () {
  return function (items, iAge) {
      var adults = [];
      if(iAge) {
        angular.forEach(items, function(item) {
          if(item.age > iAge) {
            this.push(item)
          }
        }, adults);
        return adults;
      } else {
      	return items;
      }
  };
});

 

You can find the complete code of this example here. You can pass as many arguments as you like to this filter (as shown below).

<div ng-controller="myCtrl">
    <ul>
      <li ng-repeat="p in people | myFilter:arg1:arg2:arg3:arg4">
        {{ p.name }} ({{p.age}})
      </li>
    </ul>
  </div>


app.filter('myFilter', function () {
  return function (items, arg1, arg2, arg3, arg4) {
      // this will enable the filter to loop through these arguments and return some code
  };
});

Hope you find this post useful.

In the next post we will learn how to create a Demo application for Quick Search Tab using Angular JS filters.