AngularJS Number Filter with Example

Here we will learn what is angularjs number filter, use of number filter in angularjs and how to show number with decimal values or how to limit size of decimal values using angularjs number filter with simple example.

AngularJS Number Filter

In angularjs, number filter is used to format the number and convert it as string or text. By using number filter in angularjs we can show number with decimal values and we define limit to show number of decimal values.

AngularJS Number Filter Syntax

Following is the syntax of using number filter in angularjs applications.

 

{{numberexpression | number}}

E.g Suppose if we give expression like {{1000 | number}} it will format our number and return result as 1,000.

 

In case if we want to show number with decimal values our syntax will be like as shown below

 

{{numberexpression | number:fractionsize}}

E.g If we give expression like {{1000 | number:2}} it will format our number and return result as 1,000.00

 

We will see how to use number filter in angularjs application with or without decimal values.

AngularJS Number Filter Example

Following is the example of using angularjs number filter in angularjs applications.

 

Live Preview

<!DOCTYPE html>

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

<head>

<title>

AngularJs number filter Example

</title>

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

<script>

var app = angular.module("AngularnumberApp", []);

app.controller("numberctrl", function ($scope) {

$scope.sampleval = 52343.1435784;

});

</script>

</head>

<body ng-app="AngularnumberApp">

<div ng-controller="numberctrl">

Enter Number: <input type="text" ng-model="sampleval" /><br /><br />

Default Number expression:{{sampleval | number}}<br /><br />

Number with Decimal Value: {{sampleval | number:4}} <br /><br />

Number with Zero Decimals:{{sampleval | number:0}}

</div>

</body>

</html>

If you observe above code we applied number filter with and without decimal values expression to display number. It will format our number to string. Now we will run and see the output

Output of AngularJS Number Filter Example

Following is the result of number filter example in angularjs.

 

Angularjs number filter example output or result

This is how we can use number filter in angularjs applications to format number and display it in string format.