jQuery 在 Angularjs 中格式化输入值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19890364/
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
Format input value in Angularjs
提问by Jon Snow
I'm trying to write a directive that automatically formats a number in the <input>but the the model isn't formatted.
Getting it to work is fine, on load the value in the input is displayed as 1,000,000 and 1000000 in the controller, however when typing only the ngModel.$parsersfunction fires.
The only time when the ngModel.$formattersfire is when the directive gets loaded and when the value is 0.
我正在尝试编写一个指令，自动格式化一个数字，<input>但模型没有格式化。让它工作很好，加载时输入中的值在控制器中显示为 1,000,000 和 1000000，但是当只输入ngModel.$parsers函数时会触发。唯一ngModel.$formatters发生火灾的时间是指令被加载并且值为 0 时。
How can I make it work on keypress(I've tried binding to keypress/keyup but it doesn't work).
我怎样才能让它在 keypress 上工作（我已经尝试绑定到 keypress/keyup 但它不起作用）。
Here's my code:
这是我的代码：
angular.module('myApp.directives', []).directive('filterInput', ['$filter', function($filter) {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attr, ngModel) {
ngModel.$parsers.push(function fromUser(text) {
return parseInt(text.replace(",", ""));
});
ngModel.$formatters.push(function toUser(text) {
console.log($filter('number')(text));
return ($filter('number')(text || ''));
});
}
};
}]);
回答by Maxim Shoustin
Here is working example where we use unshift:
这是我们使用的工作示例unshift：
angular.module('myApp.directives', []).directive('format', ['$filter', function ($filter) {
return {
require: '?ngModel',
link: function (scope, elem, attrs, ctrl) {
if (!ctrl) return;
ctrl.$formatters.unshift(function (a) {
return $filter(attrs.format)(ctrl.$modelValue)
});
ctrl.$parsers.unshift(function (viewValue) {
var plainNumber = viewValue.replace(/[^\d|\-+|\.+]/g, '');
elem.val($filter(attrs.format)(plainNumber));
return plainNumber;
});
}
};
}]);
The HTML seems:
HTML似乎：
<input type="text" ng-model="test" format="number" />
See Demo Fiddle
看演示 Fiddle
Hope its help
希望它的帮助
回答by Abel
This module works fine for me.
这个模块对我来说很好用。
https://github.com/assisrafael/angular-input-masks
https://github.com/assisrafael/angular-input-masks
Example:
例子：
<input type="text" name="field" ng-model="number" ui-number-mask>
回答by Andrew
Small edit to Maxim Shoustin's answer below as per the answer to this question: AngularJS formatter - how to display blank instead of zero
根据对这个问题的回答，对下面的 Maxim Shoustin 的回答进行了小编辑： AngularJS 格式化程序 - 如何显示空白而不是零
Only change is to ensure that the input is blank rather than zero on the deletion of the last number:
唯一的变化是确保在删除最后一个数字时输入为空白而不是零：
ctrl.$parsers.unshift(function (viewValue) {
console.log(viewValue);
if(viewValue){
var plainNumber = viewValue.replace(/[^\d|\-+|\.+]/g, '');
elem.val($filter('number')(plainNumber));
return plainNumber;
}else{
return '';
}
});
