AngularJS Filters:

AngularJS Filters allow us to format the data to display on UI without changing original format.

Filters can be used with an expression or directives using pipe | sign.

{{expression | filterName:parameter }}

Angular includes various filters to format data of different data types. The following table lists important filters.

Filter Name	Description
Number	Formats a numeric data as text with comma and fraction.
Currency	Formats numeric data into specified currency format and fraction.
Date	Formats date to string in specified format.
Uppercase	Converts string to upper case.
Lowercase	Converts string to lower case.
Filter	Filters an array based on specified criteria and returns new array.
orderBy	Sorts an array based on specified predicate expression.
Json	Converts JavaScript object into JSON string
limitTo	Returns new array containing specified number of elements from an existing array.

Number Filter:

A number filter formats numeric data as text with comma and specified fraction size.

{{ number_expression | number:fractionSize}}

If a specified expression does not return a valid number then number filter displays an empty string.

The following example demonstrates how to use number filter with number expression or a model property.

Example: Number filter


<!DOCTYPE html>
<html >
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app >
    Enter Amount: <input type="number" ng-model="amount" /> <br />

    100000 | number = {{100000 | number}} <br />
    amount | number = {{amount | number}} <br />
    amount | number:2 = {{amount | number:2}} <br />
    amount | number:4 = {{amount | number:4}} <br />
    amount | number = <span ng-bind="amount | number"></span>
</body>
</html>

Try it

Currency Filter:

The currency filter formats a number value as a currency. When no currency symbol is provided, default symbol for current locale is used.

{{ expression | currency : 'currency_symbol' : 'fraction'}}

Example: Currency filter

<!DOCTYPE html>
<html >
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app="myApp">
    <div ng-controller="myController">
        Default currency: {{person.salary | currency}} <br />
        Custom currency identifier: {{person.salary | currency:'Rs.'}} <br />
        No Fraction: {{person.salary | currency:'Rs.':0}} <br />
        Fraction 2: <span ng-bind="person.salary| currency:'GBP':2"></span>
    </div>
    <script>
        var myApp = angular.module('myApp', []);
        
        myApp.controller("myController", function ($scope) {
            $scope.person = { firstName: 'James', lastName: 'Bond', salary: 100000}
        });
    </script>
</body>
</html>
 
Try it 

Output:


Default currency: $100,000.00 
Custom currency identifier: Rs.100,000.00 
No Fraction: Rs.100,000 
Fraction 2: GBP100,000.00

In the above example, we have applied currency filter to person.salary, which is a numeric property. It can be displayed with different currency symbols and fractions.

Date filter:

Formats date to string based on the specified format.

{{ date_expression | date : 'format'}}

Example: date filter

<!DOCTYPE html>
<html >
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app>
    <div ng-init="person.DOB = 323234234898">
        Default date: {{person.DOB| date}} <br />
        Short date: {{person.DOB| date:'short'}} <br />
        Long date: {{person.DOB | date:'longDate'}} <br />
        Year: {{person.DOB | date:'yyyy'}} <br />
    </div>
</body>
</html>
 
Try it 

Output:


Default date: Mar 30, 1980 
short date: 3/30/80 8:47 AM 
long date: March 30, 1980 
Year: 1980

Visit Angular documentation for more information on date filter.

Uppercase/lowercase filter:

The uppercase filter converts the string to upper case and lowercase filter converts the string to lower case.

Example: uppercase & lowercase filters


<!DOCTYPE html>
<html >
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app>
    <div ng-init="person.firstName='James';person.lastName='Bond'">
        Lower case: {{person.firstName + ' ' + person.lastName | lowercase}} <br />
        Upper case: {{person.firstName + ' ' + person.lastName | uppercase}} 
    </div>
</body>
</html>

Try it

Output:


Lower case: james bond
Upper case: JAMES BOND

Filter:

Filter selects items from an array based on the specified criteria and returns a new array.

{{ expression | filter : filter_criteria }}

Example: filter

<!DOCTYPE html>
<html >
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app="myApp">
    <div ng-controller="myController">
        Enter Name to search: <input type="text" ng-model="searchCriteria" /> <br />
        Result: {{myArr | filter:searchCriteria}} 
    </div>
    <script>
        var myApp = angular.module('myApp', []);
        
        myApp.controller("myController", function ($scope) {
            $scope.myArr = ['Steve', 'Bill', 'James', 'Rob', 'Ram', 'Moin']
        });
    </script>
</body>
</html>
 
Try it 

In the above example, searchCriteria contains a text entered in the input box, which will be used to filter items of an array myArr using filter:searchCriteria expression.

orderBy filter:

The orderBy filter sorts an array based on specified expression predicate.

{{ expression | orderBy : predicate_expression : reverse}}

Example: orderBy filter

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app="myApp">
    <div ng-controller="myController">
        <select ng-model="SortOrder">
            <option value="+name">Name (asc)</option>
            <option value="-name">Name (dec)</option>
            <option value="+phone">Phone (asc)</option>
            <option value="-phone">Phone (dec)</option>
        </select>
        <ul ng-repeat="person in persons | orderBy:SortOrder">
            <li>{{person.name}} - {{person.phone}}</li>
        </ul>
    </div>
    <script>
        var myApp = angular.module('myApp', []);
        
        myApp.controller("myController", function ($scope) {
        
            $scope.persons = [{ name: 'John', phone: '512-455-1276' },
                         { name: 'Mary', phone: '899-333-3345' },
                         { name: 'Mike', phone: '511-444-4321' },
                         { name: 'Bill', phone: '145-788-5678' },
                         { name: 'Ram', phone: '433-444-8765' },
                         { name: 'Steve', phone: '218-345-5678' }]
            
            $scope.SortOrder = '+name';
        });
    </script>
</body>
</html>
 
Try it 

The above example displays a list of person names and phone numbers in a particular order specified using orderBy:SortOrder filter. SortOrder is a model property and will be set to the selected value in the dropdown. Therefore, based on the value of SortOrder, ng-repeat directive will display the data.