Filters in AngularJS formats the value of expression for display to the user. There are many number of filters in AngularJS but the following are commonly used
- UpperCase - Converts text to uppercase
- LowerCase - Converts text to lowercase
- Currency - Formats a number as currency
- filter - This can only be used on Arrays, that filters Array of data to subset based on filter criteria
- Orderby - Orders data in array based on the criteria
Now lets see these filters with an example for better understanding. Before starting with the example, lets see the output that will give a good idea of what we are trying to do..
Uppercase filter in AngularJS
This filter converts text to a upper case text and below is the syntax for using this filter. We need to add this filter to the text using "|" pipe symbol as shown below
LowerCase filter in AngularJS
This filter converts text to lowercase text. Syntax is similar to uppercase text where we add a pipe symbol
Currency filter in AngularJS
The currency filter formats a number to a currency format. By default, the locale currency format is used.
The filter Filter in AngularJS
As said earlier filter can only be used on Array. Using this I can filter out subset of values containing particular character and many more functionalities can be achieved.
So in the above example I have filtered the array of fruits containing character "C".
OrderBy filter in AngularJS
Oderby filter is self explanatory. So lets filter the Array containing fruits
Below is the complete program..
Hope this tutorial helps you to understand the below stuff :
- Uppercase filter in AngularJS
- Lowercase filter in AngularJS
- Currency filter in AngularJS
- Filter filter in AngularJS
- Orderby filter in AngularJS