javascript - AngularJS 在数字输入字段中显示 2 个小数点

Question

我在将表单数据字段显示到小数点后 2 位时遇到问题。我将变量 $Scope.theItem.Charge 设置为小数点后两位:

$scope.theItem.charge = parseFloat(10 * 2).toFixed(2);

然后我将这些数据显示在一个可编辑的表单字段中，如下所示:

<input type="text" name="charge" id="charge" ng-model="theItem.charge">

这可以正常工作并显示结果，在本例中为 20.00。 但是，因为我们说这是一种“文本”输入类型，所以用户可以在该字段中输入任何文本，而不仅仅是数字。我希望简单地这样做:

<input type="number" name="charge" id="charge" ng-model="theItem.charge" step="0.01">

但这会返回以下错误:

angular.min.js:119 Error: [ngModel:numfmt]
http://errors.angularjs.org/1.5.9/ngModel/numfmt?p0=25.00
at angular.min.js:6
at Array. (angular.min.js:182)
at angular.min.js:293
at m.$digest (angular.min.js:144)
at m.$apply (angular.min.js:147)
at l (angular.min.js:98)
at D (angular.min.js:103)
at XMLHttpRequest.w.onload (angular.min.js:104)

有没有人知道如何解决这个问题？我尝试使用上面链接中描述的 Angular Directive(指令)，但这对我的场景不起作用。

Answer 1

我们使用 ng-currency来处理这个问题。这似乎是处理输入字段中小数的最稳定方式。 ng-currency 确实以一种很好的方式验证和规范化您的 ng-model。因此，您无需再与分数或错误的用户输入数据作斗争。请检查此 demo plnkr .

AngularJS 应用

var app = angular.module('plunker', ['ng-currency']);

app.controller('ApplicationController', function($scope) {
  $scope.amount = '0.203';
});

查看

<div class="container" ng-controller="ApplicationController">
    <div class="row">
      <input type="text" 
             ng-model="amount"
             currency-symbol=""
             ng-currency 
             fraction="2" />
    </div>
</div>

--> Demo plnkr