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
- currency
- number
- lowercase
- uppercase
- json
- date
- orderBy
- 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