Saturday, 4 June 2016

Filters in Angular Js



Angular js is more popular now days and for beginners, I will tell you what is Filters in angular js and show you a practical example of Filters using angular js

Introduction
Angular js is more popular now days and for beginners, I will tell you what is Filters in angular js and show you a practical example of Filters using angular js

Basically, this article will demonstrate with example the following:

  • What is Filters
  • Filters Type
  • Details  of Filters Type
  • How to use filters
  • Example with Filters on view using AngularJS data binding


What is Filters

We can use Angular JS filter feature for displaying data it to the user. The formatted value of an expression is applied to your HTML output data in AugularJs. We can use built-in Filters or create your own filters like custom filters.
  
Filters Type

Below are Filter Types in AngularJs
1. Currency
2. Date
3. Filter
4. LimitTo
5. JSON
6. Lowercase
7. Uppercase
8. OrderBy


List of AngularJS Filters Table

S.No
Filter Name
Filter Description
1
Currency
It is used to formats number as currency
2
Date
It is used to date formats
3
Filter
It is used find the item from array
4
Lowercase
It is used to convert string as lowercase
5
LimitTo
It is containing new array with specified number of items
6
Json
It is used to convert javascript object to json object
7
OrderBy
It is used to order by array
8
Uppercase
It is used to convert string as uppercase




How to use filters  


  1. {{ expression | filter_name }}  
  2. {{ expression | filter_name1 | filter_name2 | ... }}  
Currency


  1. {{ currency_expression | currency : symbol : fractionSize}}  
Lowercase

  1. {{ lowercase_expression | lowercase}}  
Uppercase

  1. {{ uppercase_expression | uppercase}}  
OrderBy

  1. {{ orderBy_expression | orderBy : expression : reverse}}  
Number

  1. {{ number_expression | number : fractionSize}}  
LimitTo

  1. {{ limitTo_expression | limitTo : limit : begin}}  
JSON

  1. {{ json_expression | json : spacing}}  
Filter

  1. {{ filter_expression | filter : expression : comparator}}  
Date

  1. {{ date_expression | date : format : timezone}}  


Example:

<tr>  
                    <td><strong>Full Name (in Capital Letters): </strong>{{employee.fullName() | uppercase}} <br /> </td>  
                </tr>  
                <tr>  
                    <td><strong>Full Name (in Normal Letters): </strong>{{employee.fullName() | lowercase}} <br /> </td>  
                </tr>  
                <tr>  
                    <td><strong>Salary: </strong>{{employee.salary | currency}}  <br /></td>  
                </tr>  


Output




Happy Programming!!

Don’t forget to leave your feedback and comments below!

If you have any query mail me to Sujeet.bhujbal@gmail.com     

Regards
Sujeet Bhujbal
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------