Filters are the way to format data in certain order, type to
be displayed on the View. Angular filters are one of the cool concepts to work
with. They are great; they're very powerful for transforming our data so
easily into reusable and scalable little chunks. Filters help in picking
out the data in our style or format. The API for the filters in Angular JS is filterProvider.
How To Add Filters:
A filter can be added in the Expression using the Pipe (|)
symbol. It is a reserved operator which
denoted that we are applying filters for the expression.
<p>The name is {{ UserName | uppercase }}</p>
Usage:
We can Use the filter either in HTML Expression on using
Javascript. Here are the samples for them
{{ expression | filter : expression : comparator}}
In Javascript
$filter('filter') (array, expression, comparator)
Using Multiple
Filters
Multiple filters can be applied using PIPE (|) separation as
below
{{ expression | filter1 |
filter2 | ... }}
If we have to pass arguments to these filters then we can
pass them using the Colon (:) Symbol
{{ expression | filter:argument1:argument2:... }}
Some Common Filter used for data transformation are
- Currency : Used to format data in currency format.
<div ng-app="" ng-controller="currencyCtrl">
<input type="number" ng-model="quantity">
<input type="number" ng-model="price">
<p> Total = {{ (quantity * price) | currency }} </p>
</div>
- Data Filter :
These filter are used to filter some subset of data from a given
set of data.
<body ng-app="TestApp">
<div ng-controller="TestCtrl">
<form class="form-inline">
<input ng-model="Search" type="text"
placeholder="Filter by" autofocus>
</form>
<ul ng-repeat="customers in customers | filter:search | orderBy: 'name' ">
<li>{{customer.name}}</li>
</ul>
</div>
</body>
- Upper and Lower case filter
<div ng-app="" ng-controller=" TestCtrl ">
<p>The name is {{ Name | uppercase }}</p>
</div>
<div ng-app="" ng-controller=" TestCtrl ">
<p>The name is {{ Name | lowercase }}</p>
</div>
- Order by : These
can be applied to sort the filter data
<body ng-app="TestApp">
<div ng-controller="TestCtrl">
<form class="form-inline">
<input ng-model="Search" type="text" placeholder="Filter by" autofocus>
</form>
<ul ng-repeat="customers in customers | filter:search | orderBy: 'name' ">
<li>{{customer.name}}</li>
</ul>
</div>
</body>
- LimitTo : These
are used to restrict the value in the expression for example if we want to
display only 10 items from collection we can use
<div ng-controller="TestCtrl">
<li ng-repeat="customer in customers | limitTo:10 ">
</div>
- Date
<div>
<p class="OrderDate">Items Order On: {{item.dateOrdered | date:'dd/MM/yy'}}</p>
</div>
- Number: To
restrict the decimal value to certain place we set this filter so that the
No of decimal will appear accordingly.
<div>
<p class="itemPrice">{{item.price | number:2 }}</p>
<p> {{item.description}}</p>
</div>
- Custom Filter : We can create custom filter by adding
and using existing filters in combination. Here is a sample code for it.
<div ng-controller="TestController">
<input ng-model="CustomTest" type="text"><br>
Reverse String: {{CustomTest|reverse}}<br>
Reverse string in uppercase: {{CustomTest|reverse:true}}<br>
</div>
Hope you all like this piece of information. Filter is very
powerful way for the data formatting using Angular JS. Please provide your
feedback or comment so that I can improve further. I will come up with some
more points in Angular JS soon.
Thanks & Regards
Microsoft MVP, Microsoft MCC, DNS MVM
