AngularJS number filter example


AngularJS number filter will return string by formatting the given number.

Example:
  • Input number :
  • Default number filter -> {{ inputnumber | number }}
    {{ inputnumber | number }}
  • Number filter with fractions :
    {{ inputnumber | number : inputfractions }}
    {{inputnumber | number : inputfractions}}
  • For negative number -> {{ -inputnumber | number }}
    {{-inputnumber | number}}

Source code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .exmpul span { padding: 5px; display: block; background: #ccc; margin: 10px 10px 20px 10px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script> </head> <body> <div ng-app="SampleApp" ng-controller="SampleCntrl"> <ul class="exmpul"> <li>Input number : <input type="text" ng-model="inputnumber" /> </ul> <ul class="exmpul"> <li>Default number filter -> <strong>{{ <em>inputnumber | number</em> }}</strong> <br /> <span>{{ inputnumber | number }}</span> </li> </ul> <ul class="exmpul"> <li>Number filter with fractions : <input type="text" ng-model="inputfractions" /> <br /> <strong>{{ <em>inputnumber | number : inputfractions</em> }}</strong> <br /> <span>{{inputnumber | number : inputfractions}}</span> </li> </ul> <ul class="exmpul"> <li>For negative number -> <strong>{{ <em>-inputnumber | number</em> }}</strong> <br /> <span>{{-inputnumber | number}}</span> </li> </ul> </div> <script> var myapp = angular.module("SampleApp", []); myapp.controller("SampleCntrl", function ($scope) { $scope.inputnumber = 48643589.456542; $scope.inputfractions = 2; }); </script> </body> </html>