Built-in Filters in Angular.js

Rahul Bansal
10y
12k
0
0

Article

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".

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

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

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.

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

2. lowercase: It will change all the letter in to lowercase as in the following:

{{ x | lowercase }}

Output

3. Currency: It will change all the digits to currency and "$" is the default currency.

{{ x | currency}}

Output

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.

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.

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.

Step 6: Run the page and see the output.

Up Next

Ebook Download

View all

Hands-On With AngularJS Using ASP.NET

Read by 6.3k people

Download Now!

Learn

View all