AngularJS: API: ng/filter/number


number

  1. - filter in module ng

Formats a number as text.

If the input is not a number an empty string is returned.

Usage

In HTML Template Binding

{{ number_expression | number : fractionSize}}

In JavaScript

$filter('number')(number, fractionSize)

Arguments

ParamTypeDetails
numbernumberstring

Number to format.

fractionSize
(optional)
numberstring

Number of decimal places to round the number to. If this is not provided then the fraction size is computed from the current locale's number formatting pattern. In the case of the default locale, it will be 3.

Returns

string

Number rounded to decimalPlaces and places a “,” after each third digit.

Example

index.html
<script>
  angular.module('numberFilterExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.val = 1234.56789;
    }]);</script><div ng-controller="ExampleController">
  Enter number: <input ng-model='val'><br>
  Default formatting: <span id='number-default'>{{val | number}}</span><br>
  No fractions: <span>{{val | number:0}}</span><br>
  Negative number: <span>{{-val | number:4}}</span></div>
protractor.js
 it('should format numbers', function() {
   expect(element(by.id('number-default')).getText()).toBe('1,234.568');
   expect(element(by.binding('val | number:0')).getText()).toBe('1,235');
   expect(element(by.binding('-val | number:4')).getText()).toBe('-1,234.5679');
 });

 it('should update', function() {
   element(by.model('val')).clear();
   element(by.model('val')).sendKeys('3374.333');
   expect(element(by.id('number-default')).getText()).toBe('3,374.333');
   expect(element(by.binding('val | number:0')).getText()).toBe('3,374');
   expect(element(by.binding('-val | number:4')).getText()).toBe('-3,374.3330');});