Different Types of Angular JS Filters with Examples
Posted By : Arunendra Kumar | 29-Jun-2017
AngularJS Filters
> Filters are used in AngularJS to format data.
> Filters can be added to expressions by using the pipe character |, followed by a filter.
AngularJs filters are as follows:-
1) Currency:- Format a number to a currency format.
for example:- if value is stored in price variable
then we show in html as
{{price | currency}}
2) date:- Format a date to a specified format.
if we want to format in html then
{{ date_expression | date : format : timezone}}
example:-
{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}
if we want to format in Controller then
$filter('date')(date, format, timezone)
example:-
$filter('date')(date, 'MM/dd/yyyy HH:mm:ss');
3)filter:- Select a subset of items from an array.
In Html file
{{ filter_expression | filter : expression : comparator : anyPropertyKey}}
example:-
ng-repeat="friend in friends | filter:searchText"
In controller file
$filter('filter')(array, expression, comparator, anyPropertyKey)
example:-
var array = [{
length : 10,
answerer : {
email : '[email protected]',
name : 'test user'
}
},
{
length : 20,
answerer : {
email : '[email protected]',
name : 'admin'
}
}];
var expression = { answerer : { email: 'adm' } };
Then filtering based on this:
var filteredData = $filter('filter')(array, expression)
4)json:- Format an object to a JSON string.
In Html file
{{ json_expression | json : spacing}}
example:-
{{ {'name':'value'} | json }}
In controller file
$filter('json')(object, spacing)
5)limitTo:- Limits an array/string, into a specified number of elements/characters.
In html file
{{ limitTo_expression | limitTo : limit : begin}}
example:-
{{ numbers | limitTo:numLimit }}
In controller file
$filter('limitTo')(input, limit, begin)
6)lowercase:- Format a string to lower case.
In html file
{{ lowercase_expression | lowercase}}
In controller file
$filter('lowercase')()
7)uppercase:- Format a string to lower case.
In html file
{{ uppercase_expression | uppercase}}
In controller file
$filter('uppercase')()
8)number:- Format a number to a string.
In html file
{{ number_expression | number : fractionSize}}
In controller file
$filter('number')(number, fractionSize)
9)orderBy:- Orders an array by an expression.
In html file
{{ orderBy_expression | orderBy : expression : reverse : comparator}}
In controller file
$filter('orderBy')(collection, expression, reverse, comparator)
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Arunendra Kumar
Arunendra is Masters in computer Applications , He is having a great knowledge of Java .