web-dev-qa-db-fra.com

Formater la valeur d'entrée dans Angularjs

J'essaie d'écrire une directive qui formate automatiquement un nombre dans le <input> mais le modèle n'est pas formaté. Le faire fonctionner est très bien, à la charge la valeur dans l'entrée est affichée comme 1.000.000 et 1000000 dans le contrôleur, cependant en tapant seulement le ngModel.$parsers la fonction se déclenche. La seule fois où le ngModel.$formatters le feu est lorsque la directive est chargée et lorsque la valeur est 0.

Comment puis-je le faire fonctionner sur la touche (j'ai essayé de lier à la touche/touche mais cela ne fonctionne pas).

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

        }
    };
}]);
javascriptjqueryangularjsinput
31
Jon Snow

Voici un exemple de travail où nous utilisons 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;
            });
        }
    };
}]);

Le HTML semble:

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

Voir la démo Fiddle

J'espère que son aide

50
Maxim Shoustin

Ce module fonctionne bien pour moi.

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

Exemple:

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

Petite modification de la réponse de Maxim Shoustin ci-dessous selon la réponse à cette question: AngularJS formatter - comment afficher le blanc au lieu de zéro

La seule modification consiste à s'assurer que l'entrée est vide plutôt que zéro lors de la suppression du dernier numéro:

   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/

1
Andrew