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

  Total Views : 1181
  Comments : 0
 
  Keywords : What are filters in angularjs, Use of filters in angularjs application with example, How to create and use filters in angularjs application 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. AngularJs filters is a concepts that work with separation of record based on column and we will 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 expression with pipe 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 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.

 

We will see simple example of using filters in angularjs.

Example of filters in AngularjS

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 Filter Expressions in AngularJS

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

 

Angularjs filters with example output or result

Types of AngularJS Filters

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.

 Comments (0)

Be the first to give your valuable feedback

Leave a comment

  • Default Tutlane User