web-dev-qa-db-fra.com

AngularJS et AngularUI: masque ou formate un numéro de téléphone lors de la liaison

J'utilise AngularUI pour formater ou "masquer" une entrée de numéro de téléphone, et cela fonctionne très bien avec un modèle ng:

<input ng-model="emer.phone" ui-mask="{{'(999) 999-9999'}}" type="text"/>

Question: Mais maintenant, comment puis-je appliquer le même masque de la même manière en utilisant ng-bind, j'ai quelque chose comme ceci:

<td>{{emer.phone}}</td>

Mon problème: Les modèles ng et ng-bind sont dans deux fichiers différents situés à des emplacements différents, par conséquent, l'utilisation de "$ viewValue" n'est pas une option pour moi

Une idée?

un peu de documentation sur AngularUI mask: http://angular-ui.github.io/ui-utils/

Merci!

angularjsangular-uing-bind-html
12
lito

Vous devriez utiliser ui-mask="(999) 999-9999" au lieu de ui-mask="{{'(999) 999-9999'}}".

Ce dernier essaie de se lier à un modèle avec '(999) 999-9999' dessus.

21
Tom Tavernier

Si loin que je n'ai pas pu trouver une solution simple en utilisant le masque AngularUI, j'ai dû créer un filtre. Je suis ceci: Formater les numéros de téléphone et de carte de crédit dans AngularJS

Et voici le jsfiddle: http://jsfiddle.net/jorgecas99/S7aSj/

angular.module('ng').filter('tel', function () {
    return function (tel) {
        if (!tel) { return ''; }

        var value = tel.toString().trim().replace(/^\+/, '');
        ...

À votre santé! 

7
lito

Au lieu de créer votre propre masque ou peut-être d'élaborer votre propre directive, vous pouvez utiliser les solutions existantes.

Prenez tel.js par exemple. Il s'agit d'une directive d'entrée [tel] qui formate et valide les numéros de téléphone internationaux pour vous.

Vous pouvez l'installer depuis bower comme ceci:

bower install teljs --save

Ensuite:

  1. Liez les deux fichiers de script trouvés dans le dossier 'src': tel.js et metadatalite.js.

    <script src="bower_components/teljs/src/tel.js"></script>
<script src="bower_components/teljs/src/metadatalite.js"></script>

  2. Chargez le module tel.js.

    angular.module('<your module>', ['teljs']);

Vous pouvez essayer tel.js ici:

http://michaelkrog.github.io/tel.js/

Remarque: je suis le développeur de tel.js.

3
Michael Krog

Je peux voir dans le ui-maskdemo , ils trichent un peu et utilisent le $viewValue de ngModelController.

Donc, vous pouvez essayer la même chose.

Tout d'abord, vous devez ajouter un nom à votre champ de saisie et être encapsulé dans un formulaire (avec un nom):

<form name="demo">
    <input name="emerPhone" ng-model="emer.phone" ui-mask="{{'(999) 999-9999'}}" type="text"/>
    <td>{{demo.emerPhone.$viewValue}}</td>
</form>

Comme vous pouvez le voir dans l'exemple ci-dessus, le code d'affichage devient:

<td>{{demo.emerPhone.$viewValue}}</td>

Cela aurait été mieux s'ils avaient également fourni un filtre.

En outre, je peux voir que dans la démo de ui-mask , ils affichent et se cachent en fonction de la length du $viewValue:

<div ng-show="demo.masked.$viewValue.length">NgModelController.$viewValue: <code>{{ demo.masked.$viewValue
              }}</code></div>
            <div ng-hide="demo.masked.$viewValue.length">NgModelController.$viewValue: <code>undefined</code></div>

J'espère que cela t'aides.

2
Davin Tryon

Trouvez Plunker pour formater les numéros de carte de crédit en utilisant la directive angularjs. Formater les numéros de carte en xxxxxxxxxxxxx3456 Fromat.

    angular.module('myApp', [])

   .directive('maskInput', function() {
    return {
            require: "ngModel",
            restrict: "AE",
            scope: {
                ngModel: '=',
             },
            link: function(scope, elem, attrs) {
                var orig = scope.ngModel;
                var edited = orig;
                scope.ngModel = edited.slice(4).replace(/\d/g, 'x') + edited.slice(-4);

                elem.bind("blur", function() {
                    var temp;
                    orig  = elem.val();
                    temp = elem.val();
                    elem.val(temp.slice(4).replace(/\d/g, 'x') + temp.slice(-4));
                });

                elem.bind("focus", function() {
                    elem.val(orig);
               });  
            }
       };
   })
  .controller('myCtrl', ['$scope', '$interval', function($scope, $interval) {
    $scope.creditCardNumber = "1234567890123456";
  }]);
0
Sagar Bhosale