Wednesday, April 29, 2015

Filters In Angular JS



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

  1. 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>


  1. 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>


  1. 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>


  1. 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>


  1. 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>

  1. Date
<div>
   <p class="OrderDate">Items Order On: {{item.dateOrdered | date:'dd/MM/yy'}}</p>
</div>

  1. 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>


  1. 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
Anil Kumar Pandey
Microsoft MVP, Microsoft MCC, DNS MVM



Kontera