javascript - 在 Angularjs 中格式化输入值

Question

我正在尝试编写一个自动格式化 <input> 中的数字的指令但模型未格式化。让它工作很好，加载时输入中的值在 Controller 中显示为 1,000,000 和 1000000，但是仅键入 ngModel.$parsers 时函数触发。唯一一次ngModel.$formatters当指令被加载并且值为 0 时即会触发。

我怎样才能让它在按键上工作(我试过绑定(bind)到按键/按键但它不起作用)。

这是我的代码:

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

希望对你有帮助