{"id":11521,"date":"2014-01-29T17:10:35","date_gmt":"2014-01-29T11:40:35","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=11521"},"modified":"2017-08-03T16:03:08","modified_gmt":"2017-08-03T10:33:08","slug":"writting-your-own-filters-in-angular-js","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/writting-your-own-filters-in-angular-js\/","title":{"rendered":"Writting Your Own Filters In Angular JS"},"content":{"rendered":"

While using AngularJS<\/a>, we come across situation in which we want to display some data in certain format or some specific condition to be applied on the data. In this case, filters<\/strong> comes to rescue.<\/p>\n

We can define our custom filters and return filtered data in whichever way we want to display it.<\/p>\n

Lets learn it through an example:<\/p>\n

[js]
\nangular.module(‘myDemoApp’, []).filter(‘truncate’,function () {
\n return function (input, length) {
\n input = input + "";
\n if (input.length > length) {
\n var desc = input.substring(0, length);
\n return desc + "…";
\n } else {
\n return input;
\n }
\n };
\n })
\n[\/js]<\/p>\n

Here, we have defined a filter named “truncate”<\/strong> which return a string concatenated with (…) if length of the string is more than parameter provided to the filter, otherwise return the same string as it is. So, we have a function with two arguments, first one is the string itself and second one is the length upto which we want to truncate the string.<\/p>\n

Now we can simply use the filter in our html code.<\/p>\n

[html]<\/pre>
\n<div>{{ place | truncate:8}}<\/div>
\n<pre>
\n[\/html]<\/p>\n

For example if place is “Netherlands”, it will print Netherla...<\/code><\/p>\n

Similarly we can write our own filters according to our need.<\/p>\n

Hope this will help \ud83d\ude42<\/p>\n

Building Intuitive Frontend Interfaces with AngularJS<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

While using AngularJS, we come across situation in which we want to display some data in certain format or some specific condition to be applied on the data. In this case, filters comes to rescue. We can define our custom filters and return filtered data in whichever way we want to display it. Lets learn […]<\/p>\n","protected":false},"author":65,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":4,"footnotes":""},"categories":[1439,3429],"tags":[3955,955,4697],"class_list":["post-11521","post","type-post","status-publish","format-standard","hentry","category-angular","category-front-end-development","tag-angular-development","tag-angularjs","tag-angularjs-development-company"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t