Learn to apply Filter in AngularJS

0
12600
Angular JS-Filter

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

Result
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:
lowercase

3) Currency :

Currency filter convert the integer value or number into Currency.

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

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

Result
currency2

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.

searcing

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.

orderBY
As you see number sort into ascending order.

Complete code :

Output:
output

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

LEAVE A REPLY

Please enter your comment!
Please enter your name here