Post
Ask Question

Built-in Filters in Angular.js

This article shows how to use the built-in filters in Angular.js. Built-in filters for filtering the data or changing the nature of data depending on needs.

  • currency
  • date
  • filter
  • JSON
  • limitTo
  • lowercase
  • number
  • orderBy
  • uppercase

The syntax will be like.

{{ expression | filter }}

Note. I am using Visual Studio 2012 (IDE) in this article, but you can use any kind of editor like Notepad, Notepad++, and so on.

Some built-in filters

Step 1. Create an ASP.NET Empty Web Application named "Angular_JS".

Web Application

Step 2. Add an HTML page into it named "Angular_Filter.html".

Add a page of html

Step 3: Download the Angular.js from the link Angularjs and save it to your website.

Download angular

Note. I am using Angular.min.js on this website.

Step 4. After adding the Angular.js to the website, write the script tag that will access the Angular file.

Angular file

Step 5. Now write the code using Directives and Data binding expressions into the page.

  • Write the ng-app directive in the <html> tag, which is necessary to initialize the Angular app. 
    <html ng-app xmlns="http://www.w3.org/1999/xhtml"></html>
  • Write the ng-init directive in the <div> tag, which will initialize the data in the variable named "names" like in an Array. 
    <div ng-init="names=['Ramesh',1,1000,'Suresh']"></div>
  • Now write the ng-repeat directive with the "names" variable in the < div > tag like a for each loop in C#. 
    <div ng-repeat="x in names"></div>
  • In the end, write a Data Binding Expression of the variable "x" within the brackets syntax that will iterate the values of the "names" variable. It will be written like this. 
    {{x}}

If I use some filters with "Data Binding Expression" then.

  1. uppercase: It will change all the letters to uppercase. 
    {{ x | uppercase }}
    Output
    Uppercase
  2. lowercase: It will change all the letters into lowercase as in the following. 
    {{ x | lowercase }}
    Output
    Lowercase
  3. Currency: It will change all the digits to currency and "$" is the default currency. 
    {{ x | currency }}
    Output
    Currency
  4.  Number: It will show all the digits with 3 decimal places by default as in the following. 
    {{ x | number:8 }}
    Output. I am using 8 here.
    Number
  5. Date: It will change all the digits into the date according to some rules, like the default date will be "44 years 2 months 10 days" earlier, and 1000 will add 1 second into it. 
    {{ x | date:'medium' }}
    Output: Change the 1 and 1000 into dates.
    Date
  6. limitTo: It will show the values depending on the limit of an array variable that has been set. 
    {{ names | limitTo:2 }}
    Output: Here the limit is 2, so you can only see 2 values.
    LimitTo

Example

Step 6. Run the page and see the output.

Output


Similar Articles