使用AngularJS将HTML文件中的数字限制为2位小数答案

【问题标题】：Restricting number to 2 decimal places in HTML file with AngularJS使用AngularJS将HTML文件中的数字限制为2位小数
【发布时间】：2016-08-05 22:33:44
【问题描述】：

我有一个显示来自 AngularJS 控制器的信息的 HTML 页面。这是代码的一部分：

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

我的问题是，我需要怎么做才能最多显示 2 位小数？目前，如果我更改程序，它可以给出 23.00000004 之类的值。这是应该在 Angular 控制器或 HTML 视图中进行的更改吗？谢谢。

【问题讨论】：

标签： javascript html angularjs web controller

【解决方案1】：

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

这会将其限制为两位小数。

【讨论】：

太棒了。这也适用于日期吗？我得到 2016-04-07 19:05:32.000000。有没有我可以阅读的网络资源？谢谢！
有几个地方可以阅读有关过滤器的信息，例如 here 和 here for filters。

【解决方案2】：

更新

查看 DecimalPipe (https://angular.io/api/common/DecimalPipe)。

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

'1.0-2' 代表 {minIntegerDigits}。{minFractionDigits}-{maxFractionDigits}

minIntegerDigits: 小数点前的最小整数位数。默认为 1。

minFractionDigits:小数点后的最小位数。默认为 0。

maxFractionDigits：小数点后的最大位数。默认为 3。

【讨论】：

【解决方案3】：

考虑以下代码：

<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>

更多信息请看这里：

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

另见：

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

【讨论】：