Javascript 使用NgModel输入的AngularJS数字格式筛选器指令

我想为一个输入控件创建一个指令，当输入没有焦点时，该指令用X个小数位数格式化一个数字。当输入有焦点时，我希望数字显示为无格式（无逗号）

我就快到了，代码如下。当您在输入中单击时，文本将发生更改，而当您单击out（模糊事件）时，文本格式将再次更改。但是，如果我更改输入中的值，则事件似乎会发生圆形变化，而模糊事件不会发生任何作用。然后，如果再次单击输入框，则值将在不应格式化时格式化，而模糊事件将在应格式化时取消格式化

要使用该指令，您只需执行以下操作

<input number-format ng-model="myValue" decimals="numberOfDecimals" />

---

问题评论中的讨论似乎对OP有所帮助

$parsers

导致用户指定的输入值以过滤器编号格式存储到模型值中。例如，如果输入了

123456

，则基础模型值将设置为

123456

。这里的要点是，模型值应该存储原始用户输入，而不是应用格式后的用户输入。解析

$parsers

的用户输入的一个简单实现是使用

parseFloat（）

，如下所示：

ngModelController.$parsers.push(function (data) {
    return parseFloat(data);
});

为了安全起见，应该改进此解析函数以适应错误的用户输入。我在演示Plunker中提供了一个基本的例子

在模糊时，输入字段中的值应设置为模型值的过滤版本

---

按照您定义的方式，

$parsers

，每次编辑相关输入字段时，该指令都会将格式化的数字存储到模型中（即，如果您输入了

123456

，

$modelValue

将设置为

123456

，最终成为字符串）。代替使用<代码> $解析器< /代码>和<代码> $格式化器< />代码>，为什么不在模型值上考虑<代码> $Couter（）/<代码>？我不确定添加观察者是最好的主意。我不喜欢在指令的每个实例中都有一个额外的观察者。我可以在屏幕上看到50个。50个额外的观察者听起来不太好。必须能够在没有观察者的情况下做到这一点。好吧，如果你坚持的话，这里有一个小的改变应该可以做到这一点。你没有说任何关于模型验证的内容，所以我假设你可以管理它，谢谢你的更改，我认为$parser的更改必须使用parseFloat，但不是blur的更改，谢谢。但现在你让我担心了，评论说“你没有说任何关于模型验证的事情……”我想在这个问题上使用ng required，所以我猜这很好？没问题，很高兴它有帮助。通过验证，我指的是如何处理用户在输入字段中输入愚蠢值的问题。我用一个粗略的例子更新了我的Plunker，说明了您可能想要做什么（）。然后可以使用样式类

nginvalid

或选中

ngModelController.$invalid

。

ngModelController.$parsers.push(function (data) {
    return parseFloat(data);
});