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!
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.
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é!
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:
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>
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.
Je peux voir dans le ui-mask
demo , 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.
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";
}]);