我想为输入控件创建一个指令,当输入没有焦点时,该指令将数字格式化为小数点后 X 位。当输入确实有焦点时,我希望数字显示为未格式化(无逗号)。
我几乎就在那里,使用以下代码。当您在输入内部单击时,文本会发生变化,而当您单击(模糊事件)时,文本格式会再次变化。但是,如果我更改输入中的值,则事件似乎会发生变化,而模糊事件什么也不做。然后,如果您再次单击输入框,值会在不应格式化时格式化,而模糊事件会在应格式化时取消格式化。
要使用指令你可以简单地做
<input number-format ng-model="myValue" decimals="numberOfDecimals" />
这是指令
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);
});
}
}
}]);
最佳答案
问题评论中的讨论似乎对 OP 有所帮助。
$parsers
导致用户指定的输入值作为过滤器编号格式存储到模型值中。例如,如果输入 123456
,则基础模型值将设置为 123,456
。这里的要点是模型值应该存储原始用户输入,而不是应用格式化后的用户输入。为 $parsers
解析用户输入的一个简单实现是使用 parseFloat()
,如下所示:
ngModelController.$parsers.push(function (data) {
return parseFloat(data);
});
为了安全起见,应该改进此解析功能以适应错误的用户输入。我在演示 Plunker 中提供了一个基本示例。
在模糊时,输入字段中的值应设置为模型值的过滤版本。
关于javascript - 使用 NgModel 输入的 AngularJS 数字格式过滤器指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27135056/