Filters – AngularJS

AngularJS Filters is used for change the format of the expression result.

Filters are applied directly on expressions.


AngularJS Filter Syntax


{{ expression | filter1:arg1,arg2 | filter2:arg1,arg2 }}

Filters use the pipe (|) character for its syntax.


Main AngularJS Filters

  1. currency
  2. number
  3. lowercase
  4. uppercase
  5. json
  6. date
  7. orderBy
  8. limitTo

currency Filter

Format number as currency


<span>{{ 512345678 | currency }}</span>

Result: $512,345,678.00


number Filter

Format number as text


<span>{{ 512345678 | number }}</span><br />
<span>{{ 512345678.7890 | number:2 }}</span><br />
<span>{{ 512345678.7890 | number:4 }}</span>

Result:

512,345,678
512,345,678.79
512,345,678.7890


lowercase Filter

Change the case of string to lowercase


<span>{{ "JAMES LANDRIDGE" | lowercase }}</span>

Result: james landridge


uppercase Filter

Change the case of string to uppercase


<span>{{ "james landridge" | uppercase }}</span>

Result: JAMES LANDRIDGE


json Filter

Convert javascript object to json object.


<body ng-app="empApp" ng-init="arr={ prop1 : 'value1', prop2 : 'value2'}">
	<span>{{ arr | json }}</span>
	...
</body>

Result: { “prop1”: “value1”, “prop2”: “value2” }


date Filter

Format date to particular format string


<span>{{ dateObj | date:'MM/dd/yyyy' }}</span><br />
<span>{{ dateObj | date:'short' }}</span><br />
<span>{{ dateObj | date:'medium' }}</span><br />
<span>{{ dateObj | date:'longDate' }}</span><br />
<span>{{ dateObj | date:'fullDate' }}</span><br />

Result:

01/01/2015
1/1/15 6:32 PM
Jan 1, 2015 6:32:03 PM
January 1, 2015
Thursday, January 1, 2015


orderBy Filter

Order the array in ascending or descending order.


<body ng-app="testApp" ng-controller="mainCtrl" >
	<div ng-repeat="item in testObj | orderBy:'name'">
		<span>{{ item.name }}</span><br />
	</div>
	
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js" ></script>
<script>
	var app = angular.module('testApp', []);
	
	//main controller
	app.controller('mainCtrl', ['$scope', function($scope){
		$scope.testObj = [  { name : 'ethan', age: 21 },
							{ name : 'oliver', age: 42 },
							{ name : 'abigail', age: 32},
							{ name : 'william', age: 12},
							{ name : 'sadie', age: 49}];
	}]);
</script>
</body>

Result:

abigail
ethan
oliver
sadie
william


limitTo Filter

This filter is used to get limited elements from array.


<body ng-app="testApp" ng-controller="mainCtrl" >
	<div ng-repeat="item in testObj | orderBy:'name' | limitTo:2">
		<span>{{ item.name }}</span><br />
	</div>
	
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js" ></script>
<script>
	var app = angular.module('testApp', []);
	
	//main controller
	app.controller('mainCtrl', ['$scope', function($scope){
		$scope.testObj = [  { name : 'ethan', age: 21 },
							{ name : 'oliver', age: 42 },
							{ name : 'abigail', age: 32},
							{ name : 'william', age: 12},
							{ name : 'sadie', age: 49}];
	}]);
</script>
</body>

Result:

abigail
ethan