AngularJS Filters (Number, Currency, OrderBy, LimitTo, Date, JSON) with Example

Here we will learn what are the filters in angularjs, use of filters in angularjs and how to use filters with expressions in angularjs with simple example.

AngularJS Filters

In angularjs, filters are used to change the appearance of an expressions by formatting while displaying it to users.

 

In angularjs, filter is a concept that work with a separation of record based on column and we can apply filters to expressions and directives by using the pipe (|) character.

Sytax of using Filters in AngularJS

Following is the syntax of using filters with expression in angularjs.

 

{{expression | filter}}

If you observe above syntax, we defined an expression with pipe (I) character, whenever this compiled and executed it will change the appearance of expression. 

 

Suppose, if we define expression like {{100 | currency}} it will formats the number 100 as currency using currency filter. If we execute this expression, we will get the result like $100.00.

 

In angularjs, we can apply filters to result of another filter. Generally, we call it as chaining and the syntax will be like as shown below.

 

{{expression | filter1 | filter2 | …..}}

In angularjs we can format expressions by applying filters with arguments that syntax will be like as shown below.

 

{{expression | filter:argument1:argument2:……}}

Suppose, if we define expression like {{1000 | number:3}} it will format the number 1000 with 3 decimal points using number expression. If we execute this expression we will get result like 1,000.000.

AngularJS Filters Example

Following is the example of using filters with expressions in angularjs application.

 

Live Preview

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>

AngularJs Filters example

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

</head>

<body>

<div ng-app="">

Enter Number1:<input type="text" ng-model="number1" /><br /><br />

Enter Number2:<input type="text" ng-model="number2" />

<p>Result of Multiplication: {{number1 * number2 | currency}}</p>

</div>

</body>

</html>

If we run above example we will get result like as shown below

Output of AngularJS Filters Example

Following is the output of using filters with expressions in angularjs.

 

Angularjs filters with example output or result

AngularJS Filter Types

In angularjs we have different type of filters available those are

 

File TypeDescription
lowercase This filter is used to converts string to lowercase
uppercase This filter is used to converts string to uppercase
orderby This filter is used to order an array by using specified expression
currency This filter is used to convert number to currency
filter This filter is used to get subset of items from array and returned as array
date This filter is used to convert date to string based on defined format
json It allows you to convert javascript objects into json string
limitTo This filter is used to create new array or string with specified number of elements
number It formats number as text

We will learn all these angularjs filters in detailed manner in next chapters.

Topics Covered