Формат входного значения в Angularjs

Я пытаюсь написать директиву, которая автоматически форматирует число в <input>, но модель не отформатирована. Работа с ним прекрасна, при загрузке значение на входе отображается как 1 000 000 и 1000000 в контроллере, однако при вводе только функции ngModel.$parsers срабатывает. Единственный момент, когда огонь ngModel.$formatters при загрузке директивы и когда значение равно 0.

Как я могу заставить его работать с keypress (я пытался привязать к keypress, но он не работает).

Здесь мой код:

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

        }
    };
}]);

Ответ 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

Надеемся на его помощь

Ответ 2

Этот модуль отлично работает для меня.

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

Пример:

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

Ответ 3

Маленькое редактирование Максиму Шустину ответьте ниже в соответствии с ответом на этот вопрос: AngularJS formatter - как отображать пустоту вместо нуля

Только изменение состоит в том, чтобы при удалении последнего номера вход был пустым, а не нулем:

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

http://jsfiddle.net/2n73j6rb/