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
<html >
<head>
<script src="angular.min.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
<html >
<head>
<script src="angular.min.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: 'D.G', lastName: 'Prasads', salary: 100000}
});
</script>
</body>
</html>
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
<html >
<head>
<script src="angular.min.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>
How to add filters to expressions
The uppercase filter converts the string to upper case and lowercase filter converts the string to lower case.
You can add filters to expressions by using the pipe character |, followed by a filter.
In this example, the uppercase filter format strings to upper case:
See this example: Uppercase/lowercase filter:
<html>
<script src="angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ firstName | uppercase }}</p>
</div>
<script>
angular.module('myApp', []).controller('personCtrl', function($scope) {
$scope.firstName = "D.G.Prasad",
$scope.lastName = "Vision"
});
</script>
</body>
</html>
Let's apply the lowercase filter into the same example:
See this example:
<html>
<script src="angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ firstName | lowercase }}</p>
</div>
<script>
angular.module('myApp', []).controller('personCtrl', function($scope) {
$scope.firstName = "D.G.Prasad",
$scope.lastName = "VisionComputers"
});
</script>
</body>
</html>
Other Example in Uppercase/lowercase:
<!DOCTYPE html>
<html >
<head>
<script src="angular.min.js"></script>
</head>
<body ng-app>
<div ng-init="person.firstName='D.G';person.lastName='Prasad'">
Lower case: {{person.firstName + ' ' + person.lastName | lowercase}} <br />
Upper case: {{person.firstName + ' ' + person.lastName | uppercase}}
</div>
</body>
</html>
Filter:
How to add filters to directives
Filters can be added to directives, like ng-repeat, by using the pipe character |, followed by a filter.
Let's take an example:
In this example, orderBy filter is used to sort an array.
The orderBy filter sorts an array based on specified expression predicate.
{{ expression | orderBy : predicate_expression : reverse}}
See this example:
<html>
<script src="angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<p>Looping with objects:</p>
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'Prasad',country:'USA'},
{name:'Anil',country:'USA'},
{name:'Ramesh',country:'India'},
{name:'Mahesh',country:'India'},
{name:'Ranesh',country:'Pakistan'},
{name:'Ramu',country:'India'},
{name:'Saradhi',country:'Iraq'},
{name:'Komali',country:'UK'},
{name:'Latha',country:'Russia'}
];
});
</script>
</body>
</html>
Ascending and Desending Order:
<html>
<head>
<script src="angular.min.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: 'Prasad', phone: '899-333-3345' },
{ name: 'Ramesh', phone: '511-444-4321' },
{ name: 'Gowthami', phone: '145-788-5678' },
{ name: 'Komali', phone: '433-444-8765' },
{ name: 'Sarojas', 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.
The filter Filter
The filter Filter can only be used on arrays because it selects a subset of an array. It returns an array containing only the matching items.
Let's take an example:
This example will return the names that contain the letter "o".
See this example:
<!DOCTYPE html>
<html>
<script src="angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | filter : 'o'">
{{ x }}
</li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
'Prasad',
'Ramesh',
'Mahesh',
'Gowthami',
'Anil',
'Latha',
'Komali',
'Saroja',
'Ranesh'
];
});
</script>
<p>This example displays only the names containing the letter "o".</p>
</body>
</html>
Filter an array based on user input:
You can use the value of the input field as an expression in a filter by setting the ng-model directive on an input field.
See this example:(list model)
<html>
<script src="angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<p>Type a letter in the input field:</p>
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter:test">
{{ x }}
</li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
'Prasad',
'Ramesh',
'Mahesh',
'Gowthami',
'Anil',
'Latha',
'Komali',
'Saroja',
'Ranesh'
];
});
</script>
<p>The list will only contain the names matching the filter.</p>
</body>
</html>
Filter selects items from an array based on the specified criteria and returns a new array.
{{ expression | filter : filter_criteria }}
<html >
<head>
<script src="angular.min.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 = ['Html', 'Java', '', 'CoreJava', 'Php', 'JS','AngularJs']
});
</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.
For
More Explanation
&
Online Classes
More Explanation
&
Online Classes
Contact Us:
+919885348743
+919885348743