AngularJS | number Filter

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

Recommended Posts: