AngularJS et AngularUI: masquez ou formatez un numéro de téléphone lors de la liaison
Je suis en utilisant AngularUI de format ou de "masquage", un numéro de téléphone d'entrée, et il fonctionne très bien avec un ng-modèle:
<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 à l'aide de ng-bind, j'ai quelque chose comme ceci:
<td>{{emer.phone}}</td>
Mon problème:
La ng et ng-bind sont dans deux fichiers différents dans différents endroits, à cet effet, l'utilisation de "$viewValue" n'est pas une option pour moi
Une idée?
de la documentation sur la AngularUI masque: http://angular-ui.github.io/ui-utils/
Merci!
source d'informationauteur lito
Vous devez vous connecter pour publier un commentaire.
Vous devez utiliser
ui-mask="(999) 999-9999"
au lieu deui-mask="{{'(999) 999-9999'}}"
.Ce dernier tente de se lier à un modèle avec
'(999) 999-9999'
.Jusqu'à présent, je ne pouvais pas trouver une solution simple à l'aide de AngularUI masque, j'ai donc dû créer un filtre. J'ai suivi ce: Format de téléphone et numéros de carte de crédit en AngularJS
Et voici le jsfiddle: http://jsfiddle.net/jorgecas99/S7aSj/
Cheers!
Au lieu de faire votre propre ruban de masquage ou peut-être la construction de votre propre directive, vous pouvez utiliser les solutions existantes.
Prendre tel.js par exemple. C'est une entrée[tel] directive que les formats et valide les numéros de téléphone internationaux pour vous.
Vous pouvez l'installer à partir de verdure comme ceci:
Alors:
Le lien entre les deux fichiers de script trouvé dans le 'src' dossier: tel.js et metadatalite.js.
Charge de la tel.js le module.
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
démoils trichent un peu et utiliser le$viewValue
dengModelController
.Donc, vous pouvez essayer la même chose.
Tout d'abord, vous devez ajouter un nom à votre champ de saisie et d'être enveloppé dans un formulaire (avec un nom):
Comme vous pouvez le voir dans l'exemple ci-dessus, l'affichage de code devient:
Il aurait été mieux si ils auraient fourni un filtre, bien que.
Aussi, je peux voir que dans la démo de l'interface utilisateur-masquequ'ils montrent et cachent basé sur la
length
de la$viewValue
:Espère que cette aide.
Trouver Plunker pour le Formatage des Numéros de Carte de Crédit utilisant angularjs directive. Format des Numéros de Carte de xxxxxxxxxxxx3456 Obtenues.