Angular如何在<input>中始终显示2位小数

Question

我有一个ng-model的浮点值,我想在下面的两个小数位显示<input>:

<input ng-model="myNumb" step ="0.01" type="number">

当"myNumb"具有小数时,这适用于大多数情况.但是如果"myNumb"小于2位小数(3.2)或整数(30),它不会强制显示2位小数
如何强制在<input>字段中显示2位小数

Answer 1

AngularJS - 输入数字,带2个小数位,可以帮助...过滤:

3. 设置正则表达式以使用ng-pattern验证输入.在这里,我想只接受最多2个小数位的数字和一个点分隔符.

<input type="number" name="myDecimal" placeholder="Decimal" ng-model="myDecimal | number : 2" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" step="0.01" />

向前看这是指向下一个答案ng-model ="myDecimal | number:2".

Answer 2

{{value | number : fractionSize}}

喜欢 {{12.52311 | number : 2}}

所以这将打印 12.52

Answer 3

如果您使用的是Angular 2(显然它也适用于Angular 4),您可以使用以下内容舍入到两个小数位{{ exampleNumber | number : '1.2-2' }},如:

<ion-input value="{{ exampleNumber | number : '1.2-2' }}"></ion-input>

分解

'1.2-2'意思是{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}:

• 小数点前至少显示1位数字
• 它将在小数点后显示至少2位数
• 但不超过2位数

这里和这里的信用到期

Answer 4

你尝试使用过滤器吗？

<input ng-model='val | number: 2'>

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

Answer 5

像这样简单地使用数字管道：

{{ numberValue | number : '.2-2'}}

上面的管道的工作方式如下：

• 显示小数点前至少1个整数，默认设置
• 小数点后显示不少于2个整数
• 小数点后显示不超过2个整数

Answer 6

（@maudulus 的回答）的另一个速记要删除，{maxFractionDigits}因为它是可选的。

您可以使用 {{numberExample | number : '1.2'}}