Filters In AngularJS

Introduction

AngularJS Filters cover many common uses such as formatting dates and currencies, limiting the number of items to be displayed, etc. The filters are very helpful to improve the workflow while building Angular apps.

One of the common use of filter is that it formats the value of expression for displaying  to the user. The filters can be used in any layer of AngularJS application i.e. views, controller or services. It can be also used in directives.

Filter in View templates

Filter can be used with expressions and it can be separated by pipe character.

Syntax:

{{ expression | filter }}

Example:

The "currency" filter use to format a number as currency.

<div>
    <div style="width:100%">
        <p><b>Currency format filter example </b></p>
        <p>Quantity :
            <inputtype="number" ng-model="quantity">
        </p>
        <p>Price :
            <inputtype="number" ng-model="price">
        </p>
        <p>Total = {{(quantity*price)|currency}}</p>
    </div>
</div>

Output:



Filter can be applied to the result of other filter i.e. we can create the chain of filters. So we applied multiple filters on expressions. We will take an example of applying multiple filters on expression later on this article.

Syntax:

 

{{ expression | filter1 | filter2 | ... }}

We can also pass argument to filters. The syntax is as following.

Syntax:

{{expression | filter:argument1:argument2:... }}

Example:

In the following first example code, filter formats the number 2311 with 2 decimal points using number filter. In the second example code, date is to be formatted to "dd/MM/yyyy" and in the third example code, date format to short month name.

demo.html

<div style="width:100%">
    <p><b>Filter with argument example </b></p>
    <p>Number format example: {{2311|number:2}}</p>
    <p>Date format example: {{1505556671920|date:'dd-MM-yyyy'}}</p>
    <p>Date format example: {{1505556671920|date:"'Month:'MMM"}}</p>
</div>

Output:



Filters in controllers, services, and directives

We can also use the filters in controllers, services and directives. To do this, we need to inject a dependency with "<filterName>Filter". For example, if we want to use the number filter in controllers, services and directives then we need to inject dependency "numberFilter".

In the following example, we used the filter called "filter" and this filters the records from the array based on the condition.

DemoController.js

app.controller("demoController", ['$scope', 'filterFilter', function($scope, filterFilter) {
    $scope.employeeArray = [{
        name: 'Tejas'
    }, {
        name: 'Jignesh'
    }, {
        name: 'Rakesh'
    }, {
        name: 'Nirav'
    }, {
        name: 'Hiten'
    }, {
        name: 'Varun'
    }, {
        name: 'Chirag'
    }];
    $scope.filteredArray = filterFilter($scope.employeeArray, 's');
}]);

Demo.html

<div ng-controller="demoController" style="width:100%">
    <p><b>Filter in controller example </b></p>
    <div>
        <p>All Employee List:</p>
        <ul>
            <ling-repeat="entry in employeeArray">{{entry.name}}</li>
        </ul>
    </div>
    <div>
        <p>Employee name List that contain an "s":</p>
        <ul>
            <ling-repeat="entry in filteredArray">{{entry.name}}</li>
        </ul>
    </div>
</div>

Output:



Apply multiple filters

As we know, we can apply multiple filters in an expression. All filters are separated by pipe character (|). Filter is applied on the result of previous filter if any and that will create the chain of filters.

In the following example, I have applied two filters, first filter is employee that contains character “s” and other filter sort the result of first filter. In this example I have used controller same as in the previous example.

Demo.html:

<div ng-controller="demoController" style="width:100%">
    <p><b>Apply multiple filters</b></p>
    <div>
        <p>Employee List:</p>
        <ul>
            <ling-repeat="entry in employeeArray | filter:'s' | orderBy:'name'">{{entry.name}}</li>
        </ul>
    </div>
</div>

Output:



Summary

Filters are very powerful feature in AngularJS for transforming our data, so it is easy to scale and reuse.

Hope this will help you.