Using Filters in AngularJS

In this post I am going to explain, how we can use filters in AngularJS. This is my fourth blog in AngularJS series. Please have a look at my other blogs too.

Filters are mainly used to format our expressions that we use for displaying to the users. This helps us to do many small things in more efficient manner rather than formatting the data using javascript/jQuery & then displaying to the users.

The basic syntax of using filters in our expressions is like:-

{{ expression | filter }}

So, we can add any filter to our expression just using a pipe character (|) and the name of the filter we are going to apply on the expression. We can also add some arguments to our filters like:-

{{ expression | filter:argument1 }}

Some basic filters that we have in AngularJS are:-

  • currency : used to format a number in expression to a currency format
  • number : used to format a string in expression to a number format
  • lowercase : used to format a string in expression to a lower case
  • uppercase : used to format a string in expression to an upper case

Let’s discuss about them in more details here.

1. currency
Now, in our applications we sometimes might need to display monetary details to the users. So, lets say we are passing a data like 22 from the controller and we will display it like:-

Price: ${{ 22 }}

You might notice that even though the data is correctly displayed like ‘$22’ it is still missing the two decimal places and also we had to manually add the ‘$’ character to it. To resolve all this issues we can simply use the ‘currency’ filter over here like:-

Price: {{ 22 | currency }}

Now you will notice that using the simple ‘currency’ filter monetary data is correctly displaying now like ‘$22.00’. A simple demo of this is given at last for your reference. 🙂

2. number
Now, in our applications we sometimes might need to display numbers to the users but they might be in string or number format, we might be not sure about it. So, lets say we are passing a data like ’44’ from the controller and we will display it using the ‘number’ filter like:-

Number: {{ '44' | number }}

Now you will notice that it’s still displaying like ’44’ but in number format now. Let’s say we need to add 3 decimal places to it, so how we are going to do that? Do we need to use one more filter for that? The answer is quite simple. We will still be using the ‘number’ filter but this time passing the argument specifying the number of decimal places we need. So, we will do something like:-

Decimal: {{ '44' | number:3 }}

Now you will notice that using the simple ‘number’ filter number format is converted into a decimal format and its displaying now like ‘44.000’. Once again, a simple demo of this is given at last for your reference. 🙂

3. lowercase
Now lets say we need to display a mixed case string expression as a lowercase string. We can simply do that using the ‘lowercase’ filter like:-

{{ 'Palash Mondal' | lowercase }}

It will be displayed as ‘palash mondal’ to the users. Once again, a simple demo of this is given at last for your reference. 🙂

4. uppercase
Now lets say we need to display a mixed case string expression as an uppercase string. We can simply do that using the ‘uppercase’ filter like:-

{{ 'Palash Mondal' | uppercase }}

It will be displayed as ‘PALASH MONDAL’ to the users. Demo is given below 🙂

Demo:
Working Demo on Plunker

That’s it! If you have any comments or suggestion about this post, I would really appreciate it.
Happy Coding 🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s