Blogger news

Blogger templates

Tuesday, July 22, 2014

Filters in AngularJS

If you are new to AngularJS I would prefer to go through my introduction blog on AngularJS before read this article.
Filters are the way to tell Angular that you need to modify something for output. Inbuilt filters can do three main things. First one is formatting. This might include formatting string,numbers, dates etc. Second it can sort dataset, once the records are rendered you can sort the way you want. Last thing filters can do is filter records in a dataset say price greater than 100.  Lets go for examples. In my example I will just show

Syntax of using filter
{{expression | filter }}

where 'expression' will be the property in our controller.

Built-in Filters
Angular provides mainly two filters for string which are,
a. uppercase
b. lowercase

I will write an example for both. Say I have a controller like this

FilterModule.controller('FilterController', function ($scope) {

    $scope.name = "ThunderCats";

});

and in view I have a div to display name property (Hope you have better understanding about specifying module and controllers in view) like below
<div>{{Name | uppercase}}</div>

That's it. your output now display "
THUNDERCATS"
Yes you are right lowercase will be like this only,
<div>{{Name | lowercase}}</div>
Angular provides two main filters for numbers as well,
a. number
b. currency

number filter
Say in my controller I have a price property like below,
$scope.Price = 100.3245675898;
but while displaying it in view I just want to show two decimal place it means output should be 100.32. Let's see how easy it is in Angular with number filter,
<div>{{Price | number:2}}</div>
If price property does not had decimal place then it will add decimal value. It means if price is equal to 100 then above filter will give an output 100.00

Nice right? :) 

Currency Filter
We are adding currency filter to same price property,
<div>{{Price | currency}}</div>

Output will be $100.32 . It means currency filter will automatically add $ to result and will take just two digits from decimal place. If your number doesn't have decimal place it will add two decimal place.
Instead of $ we can append our on symbol or text with currency. Say I want to display price in Indian rupee ( 
₹ ),

<div>{{Price | currency : '₹'}}</div>

Output will be ₹100.32.

Date Filter
Assume in our controller we have a date property like below
$scope.currentDate = new Date();

If we bind this date to view
<div>{{currentDate}}</div>
output will be 
"2014-07-22T21:46:29.959Z".
Yes I wrote this post on 22nd of july 2014 :). See how difficult to read the date. Now lets apply filter
<div>{{currentDate | date:'medium'}}</div>

output :-  "Jul 22, 2014 10:51:24 PM". 

Still you want more shorter date? Yes it is possible,
<div>{{currentDate | date:'mediumDate'}}</div>

output :-  "Jul 22, 2014".
There are much more date filters available that you can see in official AngularJS documentation.

OrderBy Filter
Let say in your controller you have an array of cities like below,
$scope.Cities=  [
                  { CityName: "London" },
                  { CityName: "New York" },
                  { CityName: "Cochin" },
                  { CityName: "Tokyo" },
                  { CityName: "Sydney" }
                ];

 and we have a list in html to display items in Cities array like below. We are not adding any filters now.
<li ng-repeat="city in Cities">
        {{city.CityName}}
</li>

So we looped through city array and printed each city in the array. 'ng-repeat' is an Angular directive to loop through collections.

Output will be,
·  London
·  New York
·  Cochin
·  Tokyo
·  Sydney

Now lets add 'orderBy' filter. First I am filtering by sort order. I am modifying html like below,
<li ng-repeat="city in Cities | orderBy:'CityName'">
        {{city.CityName}}
 </li>

Output
·  Cochin
·  London
·  New York
·  Sydney
·  Tokyo
As you can see we have given filter 'orderBy' CityName and Cochin (I love this place as this is my home town :) ) came on the top. It means default sort order is ascending.

Now lets see how to order by decsending
<li ng-repeat="city in Cities | orderBy:'-CityName'">
        {{city.CityName}}
</li>

and output will be,
·  Tokyo
·  Sydney
·  New York
·  London
·  Cochin
So what magic I did to make it in descending order? Well I just add a dash ( - ) in front of CityName.

limitTo Filter
Let's see what limitTo filter will do. Assume in your arrays you just want to display just a given number of items. In our example we are going to orderBy city name and display just top 2 city names to output.
<li ng-repeat="city in Cities | orderBy:'CityName' | limitTo:2">
        {{city.CityName}}
</li>

Output
·  Cochin
·  London

Clear right?
Next let's say we want to filter exactly with name of the city
<li ng-repeat="city in Cities | filter : 'Cochin'">
        {{city.CityName}}
</li> 
Output 
·  Cochin
So from our collection we pulled out only 'Cochin'

In real time instead of hard coding you should mention you model. You can expect another blog of mine about data binding. 

All we explained was built-in filters. We can create custom filters as well. If you are interested to know about custom filters please go to my blog on Custom filter in AngularJS 

No comments:

Post a Comment