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

Posted 2023-03-16

【中文标题】AngularJS在数字输入字段中显示2个小数点数字

【英文标题】：AngularJS show 2 decimal point number in number input field

【发布时间】：2018-02-14 21:32:09

【问题描述】：

我在将表单数据字段显示到小数点后 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 错误：[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 在 m.$digest (angular.min.js:144) 在 m.$apply (angular.min.js:147) 在 l (angular.min.js:98) 在 D (angular.min.js:103) 在 XMLHttpRequest.w.onload (angular.min.js:104)

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

【问题讨论】：

输入类型是文本还是数字？

对不起，请看上面的编辑！！

你可以使用 toFixed() 来做 parseFloat(yourString).toFixed(2) ***.com/questions/4435170/…

【参考方案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

【参考方案2】：

错误：ngModel:numfmt 模型不是 number 类型的

您应该将 scope.theItem.charge 值解析为浮动 - toFixed 返回字符串：

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

是的，这很丑... :)

您还可以编写将字符串解析为浮点数的指令：

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 应用程序中不起作用。令人沮丧的是也没有产生错误。

对不起，我帮不上忙。我已经很久没有看到 AngularJS 了 :)

我们在使用 angularjs 构建的旧版应用程序之一中遇到了一些问题。无论如何，感谢您的回复。