AngularJs: mise en forme des Données dans un Input?

Problème

J'ai besoin de formater un champ de saisie visuellement afin d'aider l'utilisateur de savoir ce qu'ils doivent taper comme un numéro de téléphone. Par exemple, je veux accepter un numéro de téléphone comme étant à 3 chiffres de la zone de code 3 chiffres préfixe et le chiffre 4 suffixe: (207) 555-1212. Je veux:

  1. fournir de l'aide mise en forme du champ de saisie, de ces parenthèses et le trait d'union
  2. Je ne veux pas le "helper" caractères à inclure dans les données réelles je stocke dans mon modèle.
  3. Que l'utilisateur tape, je veux les parenthèses pour apparaître comme par magie, alors le trait d'union apparaissent également sur le point de droit.

Quelle est la meilleure façon de le faire?

Note: Ce n'est pas pour l'affichage d'un certain nombre, je pourrais utiliser un filtre pour que. C'est pour la mise en forme des données dans un input champ.

Merci pour votre aide!

peut-être vous avez besoin d'un custom champ de saisie (un widget)?

OriginalL'auteur John Gordon | 2012-12-28

  1. 14

    Si vous êtes à la recherche pour une solution simple, vous pouvez donner AngularUI un essai, http://angular-ui.github.com/

    C'est l'exemple de la "Masque" de la section de la page:

    <input ng-model="maskDemo" ui-mask="'99-99-9999'">

    Le "9"'s sont des nombres, et les autres choses est juste un masque /espaces réservés. Il doit seulement présenter les valeurs réelles. Vous modifiez le masque à inclure des parenthèses et tout ce dont vous pourriez avoir besoin.

    Le seul inconvénient c'est que lorsque le numéro de téléphone est affiché ailleurs, ou les enregistrer dans une base de données, il ressemble à "9999999999".
    c'est habituellement ce que vous voulez, bande de non-chiffres, alors n'importe quel moment vous voulez afficher votre numéro formaté, vous venez de demander la ui-mask.

    OriginalL'auteur querie.cc