是否可以使用 AngularJS $formatters 添加额外的零？ （或以任何可能的方式，输入数字？）

Posted 2023-04-13

【中文标题】是否可以使用 AngularJS $formatters 添加额外的零？ （或以任何可能的方式，输入数字？）

【英文标题】：Is it possible to add additional zeros with AngularJS $formatters? (or in any possible way, with number input?)

【发布时间】：2016-05-23 20:21:21

【问题描述】：

我想编写 AngularJS 指令，它在输入的数字中添加零，即使它们不是必需的。我有：

<input type="number" step="0.1">

即使它具有 1 的值，我也想将其显示为 1.0。当然，如果 step 是0.01，它应该总是显示为1.00。问题的症结在于，如果可能的话，我想使用number 输入而不是text（内置html 验证、移动设备键盘等）。所以我想到了 AngularJS 格式化程序（仅针对硬编码值执行此操作的简单示例）：

ngModel.$formatters.push(function(value) 
    return Number((value + 0.00001).toFixed(3));
);

它没有用，它丢失了不必要的零。而且，因为input 具有number 类型，我无法从格式化程序返回String。我尝试了一下：Plunker: Directive which adds additional zeros。 T认为它应该以某种方式是可能的（也许没有Angular？），因为如果我有硬编码：

<input type="number" value="3.000">

它在输入中显示3.000。即使我在 Plunk 上打开开发者控制台，我也可以这样做：

document.querySelector('#with-directive').value = '33.0'

并且显示33.0（DOM操作当然是解决这个问题的一种方法，但是我认为它会导致代码，这不容易维护，如果可能的话我想避免它） 我是对的，有可能做到吗？如果有人决定帮助我，我将非常感激，在此先感谢您。

【问题讨论】：

您可以使用字符串设置 input[type=number]（就像您在基于 querySelector 的代码中所做的那样），因此只需在第二个代码框中将“Number”更改为“String”。实际上，input.value 将始终是非：检查输入的字符串

@dandavis 我不这么认为，如果我这样做：return String((value + 0.00001).toFixed(3)); 我得到了errors.angularjs.org/1.5.5/ngModel/numfmt?p0=NaN，即使我明确写了return String('2'); 我得到了Expected '2' to be a number 错误，这很奇怪 - 正如你所说querySelector().value 可以是字符串，但由于某些我不知道的原因，它不能使用 ng-model。

【参考方案1】：

我建议使用类型tel 而不是数字。因为 ios 不支持 number 类型，另一方面，如果您使用 tel 类型，那么您的输出是一个字符串。 你必须像这样调整你的$formatter。

ngModel.$formatters.push(function(value) 
    return (parseInt(value)).toFixed(3);
 );

【讨论】：

看来我必须使用document.querySelector(...)，但我接受你的答案是最接近的，谢谢你的帮助！