AngularJS | number Filter

Last Updated : 07 May, 2019

AngularJS number filter is used to convert a number into string or text. We can also define a limit to display a number of decimal digits. Number filter rounds off the number to specified decimal digits.

Syntax:

{{ string| number : fractionSize}}

Parameter Values: It contains single parameter value fractionsize which is of type number and used to specify the number of decimals.

Example 1: This example format the number and set it into the fraction with two decimal place.

<!DOCTYPE html>
<html>
    <head>
        <title>Number Filter</title>
          
        <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
        </script>
    </head>
      
    <body>
   
        <div ng-app="gfgApp" ng-controller="numberCntrl">
            <h3>Number filter with fraction size.</h3>
            <p>Number : {{ value| number  : 2}}</p>
        </div>
   
        <script>
            var app = angular.module('gfgApp', []);
            app.controller('numberCntrl', function($scope) {
                $scope.value = 75598.548;
            });
        </script>
   
    </body>
</html>

Output:

Example 2: This example format the number and set it into the fraction with three decimal place.

<!DOCTYPE html>
<html>
    <head>
        <title>Number Filter</title>
          
        <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
        </script>
    </head>
      
    <body>
   
        <div ng-app="gfgApp" ng-controller="numberCntrl">
            <h3>Number filter without fraction size.</h3>
            <p>Number : {{ value| number}}</p>
        </div>
   
        <script>
            var app = angular.module('gfgApp', []);
            app.controller('numberCntrl', function($scope) {
                $scope.value = 524598.54812;
            });
        </script>
   
    </body>
</html>

Output:

My Personal Notes

Related Articles