AngularJs: Cách định dạng dữ liệu trong một đầu vào?

Question

Vấn đề

Tôi cần định dạng một lĩnh vực đầu vào trực quan để giúp người sử dụng biết những gì họ nên gõ như một số điện thoại. Ví dụ: tôi muốn chấp nhận số điện thoại dưới dạng mã vùng gồm 3 chữ số, tiền tố gồm 3 chữ số và hậu tố 4 chữ số: (207) 555-1212. Tôi muốn:

1. cung cấp các trợ giúp định dạng cho các lĩnh vực đầu vào - những dấu ngoặc đơn và dấu nối
2. Tôi không muốn các ký tự 'helper' để đưa vào dữ liệu thực tế tôi lưu trữ trong mô hình của tôi .
3. Khi người dùng nhập, tôi muốn các dấu ngoặc đơn xuất hiện một cách kỳ diệu, sau đó có dấu gạch ngang cũng xuất hiện ở đúng điểm.

Cách tốt nhất để làm điều đó là gì?

Lưu ý: Đây không phải để hiển thị số - Tôi có thể sử dụng bộ lọc cho số đó. Đây là để định dạng dữ liệu trong trường input.

Cảm ơn sự giúp đỡ của bạn!

Answer 1

Nếu bạn đang tìm kiếm một giải pháp đơn giản, bạn có thể đưa AngularUI thử, http://angular-ui.github.com/

Đây là ví dụ từ "Mask" của trang đó:

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

Các "9" là những con số và những thứ khác chỉ là mặt nạ/trình giữ chỗ. Nó chỉ nên gửi các giá trị thực tế. Bạn sẽ chỉnh sửa mặt nạ để bao gồm dấu ngoặc đơn và bất kỳ thứ gì khác mà bạn có thể cần.