Question

我在将表单数据字段显示为2位小数时遇到问题。

我将变量$Scope.theItem.Charge设置为2位小数：

$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错误：[ngModel：numfmt]
  http://errors.angularjs.org/1.5.9/ngModel/numfmt?p0=25.00
  在angular.min.js：6
  在数组。（angular.min.js：182）
  在angular.min.js：293
  at m。$ digest（angular.min.js：144）
  at m。$ apply（angular.min.js：147）
  在l（angular.min.js：98）
  在D（angular.min.js：103）
  在XMLHttpRequest.w.onload（angular.min.js：104）

有没有人对如何解决这个问题有任何想法？我已经尝试使用上面链接中描述的angular指令，但这对我的场景不起作用。

由于

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>

<强> - ＆GT; Demo plnkr

Answer 2

错误：ngModel：numfmt 模型不是number

类型

您应该将scope.theItem.charge值解析为float - toFixed返回string：

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

是的，这很丑......：）

您还可以编写用于将字符串解析为float的指令：

directive('parseFloat', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      ngModel.$parsers.push(function(value) {
        return '' + value;
      });
      ngModel.$formatters.push(function(value) {
        return parseFloat(value);
      });
    }
  };
});

只需在输入字段上使用此指令：

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

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

2 个答案:

AngularJS应用程序

视图