AngularJS - Filters

May 16, 2016 by Mukesh Kumar at 3:47 pm

Filter are used to formatting data before it is processed by a directive and displayed in a view without modifying the original data in the scope, allowing the same data to be displayed in different ways in different parts of the application.Following is list of filters in AngularJS.

number
currency
lowercase
uppercase
date
orderBy
filter
limitTo

number
currency
lowercase
uppercase
date
orderBy
filter
limitTo

Filters can be used with binding expression and directives.

Adding Filters to Expressions

Filters can be added to expressions by using the pipe character |, followed by a filter.

For example the uppercase filter formats strings to upper case as shown below.

<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ lastName | uppercase }}</p>
</div>

Adding Filters to Directives

Filters are added to directives, like ng-repeat, by using the pipe character |, followed by a filter:

For example the orderBy filter sorts an array as shown below.

<div ng-app="myApp" ng-controller="myCtrl">
<ul>
  <li ng-repeat="name in names | orderBy:'country'">
    {{ name.firstName + ', ' + name.lastName }}
  </li>
</ul>

</div>

The currency Filter

The currency filter formats a number as currency.

Example

<!DOCTYPE html>
<html>
<head>
<title>AngularJS Filters Demo</title>
<script
	src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
	var app = angular.module('productModule',[]).controller('productControleer', function($scope) {
var products = [
{ name : 'Mango', category :'Fruit', price:1.5},
{ name: "Bananas", category: "Fruit", price: 2.42},
{ name: "Apple", category: "Fruit", price: 2.02},

{ name: "Tuna", category: "Fish", price: 20.45 },
{ name: "Salmon", category: "Fish", price: 17.93},
{ name: "Trout", category: "Fish", price: 12.93},

{ name: "Beer", category: "Drinks", price: 2.99},
{ name: "Wine", category: "Drinks", price: 8.99},
{ name: "Whiskey", category: "Drinks", price: 45.99}
];
$scope.products=products;
});
	</script>
</head>
<body ng-app="productModule">
	<div ng-controller="productControleer">
		<table border="1">
			<thead>
				<tr>
					<th>Name</th>
					<th>Category</th>
					<th>Price</th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat="product in products">
					<td>{{product.name}}</td>
					<td>{{product.category}}</td>
					<td>{{product.price | currency}}</td>
				</tr>
			</tbody>
		</table>
</body>
</html>

If we have not provided any currency format by default it will consider it as $.To customize the currency character, we can pass parameter after currency filter ": Rs." that will replace "$" with "Rs.".

Output:

AngulaJS Scope

The date Filter

To format date and time in AngularJS, we need to use date filter.date filter formats date to a string based on the requested format.

AngularJS date format

With date there are several formats available in AngularJS. Here are few of them.

Format	Result
YYYY	4 Digit Year,Example 2016
YY	2 Digit Year,Example 16
MMMM	January-December
MMM	Jan-Dec
MM	01-12
DD	01-31

Visit Angular documentation for more information on date filter.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
	<script>
	 var app = angular.module("app", []);
        app.controller("DateController", ["$scope", function ($scope) {
        $scope.ThisDate = new Date();
		}]);
	</script>
</head>
<body>
<div ng-app="app" ng-controller="DateController">
<h1>AngularJS Date Filter Demo: </h1>
    
        Default date: {{ThisDate| date}} <br />
        Short date: {{ThisDate| date:'short'}} <br />
        Long date: {{ThisDate | date:'longDate'}} <br />
        Year: {{ThisDate | date:'yyyy'}} <br />
    </div>
</body>
</html>

In the above code snippet, we have created a DateController and ThisDate as $scope property that will be used to format the date and time for this demonstration.

Output:

AngulaJS date filter

Uppercase/lowercase filter:

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

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body ng-app >
<h1>AngularJS Uppercase/Lowercase Filter Demo: </h1>
    <div ng-init="person.firstName='Mukesh';person.lastName='Kumar'">
        Lower case: {{person.firstName + ' ' + person.lastName | lowercase}} <br />
        Upper case: {{person.firstName + ' ' + person.lastName | uppercase}} 
    </div>
</body>
</html>

Output:

Lower case: mukesh kumar
Upper case: MUKESH KUMAR

orderBy Filter

The orderBy filter sorts an array based on specified expression predicate.By default, strings are sorted alphabetically, and numbers are sorted numerically.The sign of the filter sets the order, (+ is ascending) while (- is descending)

Syntax:

{{ array | orderBy : expression : reverse }}

Example:

<!DOCTYPE html>
<html>
<head>
<title>AngularJS Filters Demo</title>
<script
	src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
	var app = angular.module('contryModule',[]).controller('countryController', function($scope) {
var countries = [
{name:'INDIA', state:'30',gdp:9},
{name:'USA', states:'51', gdp:19},
{name:'GERMANY', states:'16', gdp:5},
{name:'JAPAN', states:'14', gdp:4},
{name:'CHINA', states:'28', gdp:18}
];
$scope.countries=countries;
});
	</script>
<style>
.table {
	background: skyblue none repeat scroll 0 0;
	float: left;
	padding: 10px;
}
</style>
</head>
<body ng-app="contryModule">
	<div ng-controller="countryController">

		<table class="table">
			<tr>
				<th>Name</th>
				<th>No of States</th>
				<th>GDP(descending)</th>
			</tr>
			<tr ng-repeat="country in countries | orderBy:'-gdp'">
				<!-- orderBy Descending (-) -->
				<td>{{country.name}}</td>
				<td>{{country.states}}</td>
				<td>{{country.gdp}}</td>
			</tr>
		</table>

		<table class="table">
			<tr>
				<th>Name</th>
				<th>No of States</th>
				<th>GDP(ascending)</th>
			</tr>
			<tr ng-repeat="country in countries | orderBy:'gdp'">
				<!-- orderBy Ascending (+) -->
				<td>{{country.name}}</td>
				<td>{{country.states}}</td>
				<td>{{country.gdp}}</td>
			</tr>
		</table>
	</div>
</body>
</html>

Output:

AngulaJS date filter

The filter Filter

The AngulaJS filter filter selects a subset of an array.The AngulaJS filter filter can only be used on arrays, and it returns an array containing only the matching items.

Example

<!DOCTYPE html>
<html>
	<head>
		<title>Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
    var countries = [
            { name: 'USA', capital: 'Washington', city : 'Atlanta' },
            { name: 'India', capital: 'New Delhi', city : 'Gurgaon' },
            { name: 'Pakistan', capital: 'Islamabad', city : 'Lahore' },
            { name: 'Australia', capital: 'Melbourne', city : 'Sidney' }
    ];

    var app = angular.module("app", []);
    app.controller("CountryController", ["$scope", function ($scope) {
        $scope.countries = countries;
    }]);
</script>
	</head>
<body>
<div ng-app="app" ng-controller="CountryController">
        <h3>Filtering based on all columns</h3>
        Filter <input type="text" ng-model="allKeyword" />
		<p></p>
        <table border="1">
            <tr>
                <th>Country</th>
                <th>Capital</th>
                <th>City</th>
            </tr>
            <tr ng-repeat="country in countries | filter: allKeyword">
                <td>{{country.name}}</td>
                 <td>{{country.capital}}</td>
                <td>{{country.city}}</td>
            </tr>
        </table>
</div>
</body>
</html>

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