AngularJS Web Application Development Cookbook

Using the number and currency filters

AngularJS has some built-in filters that are less simple, such as number and currency; they can be used to format numbers into normalized strings. They also accept optional arguments that can further customize how the filters work.

Getting ready…

Suppose that you define the following controller in your application:

(app.js)

angular.module('myApp', [])
.controller('Ctrl', function ($scope) {
  $scope.data = {
    bignum: 1000000,
    num: 1.0,
    smallnum: 0.9999,
    tinynum: 0.0000001
  };
});

How to do it…

You can apply the number filter in your template, as follows:

(index.html) <div ng-app="myApp"> <div ng-controller="Ctrl"> <p>{{ data.bignum | number }}</p> <p>{{ data.num | number }}</p> <p>{{ data.smallnum | number }}</p> <p>{{ ...