2.1 Inbuilt Filters and Custom Filter into AngularJS
In Built Filters:
Syntax : {{data | filter : options }}
Filters are put into the HTML Files and some of very common used filters are listed Below.
Currency Filter :
<body ng-controller="ShopConroller as shop">
<div ng-repeat="product in shop.products">
<h1>{{product.name}}</h1>
<h1>{{product.price | currency }}</h1>
<p>{{product.description}}</p>
<button ng-show="shop.product.canBuy">BUY</button>
<div>
</body>
Date Filter :
if you have Date like 1388123412323 and we need to see that date into proper format then do the following
Example :
{{'1388123412323' | date:'dd/MM/yyyy'}} it will show 27/12/2013
Uppercase filter :
if you want to see string into uppercase then at that time we can use this filter
{{'abCd' | uppercase}}
Lowercase filter
if you want to see string into Lowercase then at that time we can use this filter
{{'abCd' | lowercase}}
LimitTo filter
if you want data to some specific limit at that time you can use this filter
{{"address" | limitTo:3}} it will show add
orderBy filter etc...
ng-src:
When we are dealing with the image into client side at that time we want source of that image.Into HTMl <img> tag contain src(source) attribute to define the path of that image.this is also valid into AngularJS but what happen we you watching into developer tools then at that time you will get 404 image not found error.so to resolve that error we need to use ng-src directory to specify path of that image.
Custom Filter :
Sometimes in built Filters won't fit to your requirement so at that time you need to create your own filter which filter out your data and give data to you which you want.
Here I describe a filter which is not available and i want that into my application So for that i need to create it customly and put my own functionality into it.
So i want to create a filter which converts the number to their ordinal values for Ex : if i pass 56 then it would return "fifty sixth"
So here is the Custom Filter for that.
app.filter('ordinal', function()
{
return function(number)
{
if(isNaN(number) || number < 1)
{
return number;
}
else
{
var lastDigit = number % 10;
if(lastDigit === 1)
{
return number + 'st'
}
else if(lastDigit === 2)
{
return number + 'nd'
}
else if (lastDigit === 3)
{
return number + 'rd'
}
else if (lastDigit > 3)
{
return number + 'th'
}
}
}
});
Exercise :
1) Use an Angular filter to display the price as a currency.
2) Use and Angular Filter to display the "Pratik" into Uppercase.
3) Use and Angular Filter to display the "Pratik" into Lowercase.
4) Use and Angular Filter to display the "Pratik" into Reverse Order.
5) Use and Angular Filter to display the "Pratik" into Reverse + lowercase.
Feel free to comment below your experience with above approach and If you still find any problem with above steps Let me know I would love to help you to resolve your problem.
If you want to take your Technological Knowledge to the Next Level and For More Technological information Stay tuned to visionfortech.blogspot.com
Related Posts :
2) (Level 1.1) Directives,Modules into AngularJS
3) (Level 1.2) Controller Into AngularJS
4) (Level 1.3) In built Directives of AngularJS
5) (Level 2.1) AngulerJs Filters and How to Create Custom Filters into AngularJs
6) (Level 2.2) Tabs into Angular
This comment has been removed by a blog administrator.
ReplyDelete