Learn to apply Filter in AngularJS

Angular JS-Filter

Few days ago we had started with AngularJS programming in our blog, today we will learn how to apply filter in AngularJS. AngularJS expression binds a data in different format such as string, date, currency etc. Angular JS filter organized data by transforming them in view expression.

Filter can apply with pipe character in template binding expression {{   }}.

Why to use Filter:

  • Filter can be used to organizing a data such as sort, search
  • It transform data in view expression to display them in specific format like date, currency, lower case, upper case

AngularJs have following useful built in filter that can be used for manipulate/modifying a data.
1) UpperCase
2) LowerCase
3) Currency
4) Filter
5) Orderby

How to apply Filter

Filter are added using pipe “|” character.  It transforms the data in binding expression to display specific format. It displays output where binding expression is specified {{ }} in current scope.

Here is following example that shows how to add a filter.

Let see how to apply these filter in detail

1) UpperCase :

It convert string into uppercase. In following example as we write in input box the text will invoke to Uppercase


2) LowerCase :

It is opposite to uppercase filter, this filter convert string into lower case.

Following as we write in input box the text will change to lower case:

3) Currency :

Currency filter convert the integer value or number into Currency.

In following screen as we write integer number in input box, the result will come with currency symbol

In case, if we do not want default currency symbol we can specified the currency symbol in view expression.


4) Filter :

It filters out the data and displays relevant information only. This filter mainly used for searching to get relevant content.

This piece of code will give list with text · Ma · BA · BCA · MBA · B.com · MCA. As we type in following text the relevant information will come up.

5) Order by :

Order by organize data in numeric and alphabet order. Let say we want to change order of 9,8,7,6,5,4,3,2,1]  into [1,2,3,4,5,6,7,8,9] to [, for this we need to apply order by filter.  Consider following example in which I am changing order to ascending order.

As you see number sort into ascending order.

Complete code :


Hence we have learnt to how to apply filter in AngularJS template.


Please enter your comment!
Please enter your name here