在Angularjs中格式化输入值

Question

我正在尝试编写一个指令,自动格式化数字,<input>但模型没有格式化.让它工作很好,在加载时,输入中的值在控制器中显示为1,000,000和1000000,但是在键入时仅ngModel.$parsers触发该功能.ngModel.$formatters火焰是指令加载时和值为0时的唯一时间.

如何使它在按键上工作(我尝试绑定到按键/键盘但它不起作用).

这是我的代码:

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 || ''));
            });

        }
    };
}]);

Answer 1

这是我们使用的工作示例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;
            });
        }
    };
}]);

HTML似乎:

<input type="text" ng-model="test" format="number" />

见演示 Fiddle

希望它的帮助

Answer 2

这个模块对我来说很好.

https://github.com/assisrafael/angular-input-masks

例:

<input type="text" name="field" ng-model="number" ui-number-mask>