Restricting number to 2 decimal places in HTML file with AngularJS

Question

I have a HTML page that displays the information from an AngularJS controller. This is part of the code:

<td id="calories">{{ ctrl.caltotal }}</td>

My question is, what do I need to do so that this is displayed at a maximum of 2 decimal places? At the moment if I change the program it can give values like 23.00000004. Is this a change that should be made in the Angular Controller or in the HTMl view? Thanks.

score 4 · Accepted Answer · answered Apr 14 '16 at 11:42

4

<td id="calories">{{ ctrl.caltotal | number:2}}</td>

That will restrict it to two decimal places.

answered Apr 14 '16 at 11:42

rrd

5,789
3
28
36

Great. Does this work with a date too? I get 2016-04-07 19:05:32.000000. Is there a web resource I can read about this? Thanks! – Apr 14 '16 at 12:31
1

There's several places to read about the filters, like [here](https://scotch.io/tutorials/all-about-the-built-in-angularjs-filters) and [here for filters](https://docs.angularjs.org/api/ng/filter). – rrd Apr 14 '16 at 12:34

score 2 · Answer 2 · answered Dec 06 '21 at 15:37

UPDATE

Check out DecimalPipe ( https://angular.io/api/common/DecimalPipe ).

{{ your_number | number : '1.0-2' }}

'1.0-2' represents {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

minIntegerDigits: The minimum number of integer digits before the decimal point. Default is 1.

minFractionDigits: The minimum number of digits after the decimal point. Default is 0.

maxFractionDigits: The maximum number of digits after the decimal point. Default is 3.

score 0 · Answer 3 · edited May 23 '17 at 12:13

Consider the following code :

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script> 
    <style>

    </style>
</head>
<body ng-app="myApp" ng-controller="myCtrl"> 
    <input type="number" ng-model="score" /> {{score | number:2}}
<script>
    //1 module declaration
    var app = angular.module('myApp', []);
    //2 controller declaration
    app.controller('myCtrl',function($scope){
        $scope.score = 50;
        //code here
    });
</script> 
</body> 
</html>

See here for further information:

https://docs.angularjs.org/api/ng/filter/number

Also see:

Angular how to display number always with 2 decimal places in <input>
AngularJS {{ val | number:1 }} not rounding to 1 decimal place

Restricting number to 2 decimal places in HTML file with AngularJS

3 Answers3

Linked