This article shows how to use the built-in filters in Angular.js. Built-in filters for filtering the data or change the nature of data depending on needs like:
- 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 a 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 into your website.
![Download the Angular]()
Note: I am using Angular.min.js in this website.
Step 4: After adding the Angular.js into the website, write the script tag that will access the Angular file.
![Angular file]()
Step 5: Now to write the code using Directives and Data binding expressions into the page.
a. Write the
ng-app directive in the <html> tag, that is necessary to initialize the Angular app like:
<html ng-app xmlns="http://www.w3.org/1999/xhtml"></html>b. Write the ng-init directive in the <div> tag, that will initialize the data in the variable named "names" like in an Array:
<div ng-init="names=['Ramesh',1,1000,'Suresh']"></div>
c. Now write the ng-repeat directive with the "names" variable in the < div > tag like a foreach loop in C#.
<div ng-repeat="x in names"> </div>
d. 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:
{{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 letter in to 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" earliar 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.
![Example]()
Step 6: Run the page and see the output.