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>

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

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>

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.