在Angularjs中格式化输入值

一尘不染

在Angularjs中格式化输入值

angularjs

我正在尝试编写一条指令，该指令会自动在中格式化数字，<input>但模型未格式化。使它正常工作是很好的，在加载时，输入值在控制器中显示为1,000,000和1000000，但是，只有键入时，该ngModel.$parsers函数才会触发。ngModel.$formatters发生火灾的唯一时间是指令被加载且值为0时。

我怎样才能使它在keypress上起作用（我曾尝试绑定到keypress / keyup，但它不起作用）。

这是我的代码：

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

        }
    };
}]);

阅读 267

2020-07-04

共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](http://jsfiddle.net/SAWsA/2776/)**

希望它的帮助

2020-07-04