AngularJs: jak formatować dane w danych wejściowych?

Question

Problem

muszę sformatować pole wprowadzania wizualnie w celu ułatwienia użytkownikowi wiedzieć, co powinni wpisać jako numer telefonu. Na przykład chcę zaakceptować numer telefonu jako 3-cyfrowy numer kierunkowy, 3-cyfrowy prefiks i 4-cyfrowy sufiks: (207) 555-1212. Chcę:

1. zapewnić pomocnika formatowanie pola input - te nawiasy i myślniki
2. Nie ma znaków „pomocnika”, które należy uwzględnić w danych rzeczywistych przechowywać w moim modelu .
3. Gdy użytkownik wpisze, chcę, aby nawiasy pojawiły się w magiczny sposób, a następnie w odpowiednim miejscu pojawią się łączniki.

Jaki jest najlepszy sposób na zrobienie tego?

Uwaga: Nie służy do wyświetlania numeru - mógłbym użyć do tego filtra. Służy do formatowania danych w polu input.

Dzięki za pomoc!

Answer 1

Jeśli szukasz prostego rozwiązania, można dać AngularUI spróbować, http://angular-ui.github.com/

To jest przykład z sekcji „Mask” z tej strony:

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

z „9” Są to liczby, a inne rzeczy to tylko maska ​​/ symbole zastępcze. Powinien podawać tylko rzeczywiste wartości. Zmodyfikujesz maskę tak, aby zawierała nawiasy i wszystko, czego potrzebujesz.