javascript 使用 NgModel 输入的 AngularJS 数字格式过滤指令
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27135056/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS number format filter directive for input using NgModel
提问by Gillardo
I would like to create a directive for an input control that formats a number with X number of decimal places when the input doesnt have focus. When the input does have focus, i would like the number to appear unformatted (no commas).
我想为输入控件创建一个指令，当输入没有焦点时，它会格式化一个带有 X 位小数的数字。当输入确实具有焦点时，我希望数字显示为未格式化（无逗号）。
I am almost there, with the following code. When you click inside the input, the text changes and when you click out (blur event) the text formats again. However, if i change the value in the input, then the events seem to change round, and the blur event does nothing. Then if you click in the input box again, the value formats when it shouldnt, and the blur event unformats, when it should format.
我快到了，使用以下代码。当您在输入内单击时，文本会发生变化，而当您单击外（模糊事件）时，文本会再次格式化。但是，如果我更改输入中的值，则事件似乎会发生变化，而模糊事件什么也不做。然后，如果您再次单击输入框，值在不应该格式化时进行格式化，而模糊事件在应该格式化时取消格式化。
To use the directive you can simply do
要使用该指令，您可以简单地执行
<input number-format ng-model="myValue" decimals="numberOfDecimals" />
Here is the directive
这是指令
App.directive('numberFormat', ['$filter', '$parse', function ($filter, $parse) {
return {
require: 'ngModel',
link: function (scope, element, attrs, ngModelController) {
var decimals = $parse(attrs.decimals)(scope);
ngModelController.$parsers.push(function (data) {
//convert data from view format to model format
return $filter('number')(data, decimals); //converted
});
ngModelController.$formatters.push(function (data) {
//convert data from model format to view format
return $filter('number')(data, decimals); //converted
});
element.bind('focus', function () {
element.val(ngModelController.$modelValue);
});
element.bind('blur', function () {
element.val(ngModelController.$viewValue);
});
}
}
}]);
回答by miqh
Discussion in the question comments appeared to have helped the OP.
问题评论中的讨论似乎对 OP 有所帮助。
$parserswas causing user-specified input values to be stored to the model value as the filter number format. For example, if 123456was entered, the underlying model value would be set to 123,456. The point here is that the model value should be storing the raw user input, not the user input after formatting is applied. A simple implementation to parse the user input for $parserswould be to use parseFloat(), like so:
$parsers导致用户指定的输入值作为过滤器编号格式存储到模型值中。例如，如果123456输入 ，则基础模型值将设置为123,456。这里的重点是模型值应该存储原始用户输入，而不是应用格式化后的用户输入。解析用户输入的一个简单实现$parsers是使用parseFloat()，如下所示：
ngModelController.$parsers.push(function (data) {
return parseFloat(data);
});
To be safe, this parsing function should be improved to accommodate for bad user input. I've provided a rudimentary example of this in my demonstration Plunker.
为安全起见，应改进此解析功能以适应不良用户输入。我在我的演示 Plunker 中提供了一个基本的例子。
On blur, the value in the input field should be set to the filtered version of the model value.
在模糊时，输入字段中的值应设置为模型值的过滤版本。
