Angular Input格式化

今天在Angular中文群有位同學問到：如何實作對input box的格式化。如下的方式對嗎？

這當然是不對的。在Angular中filter（過濾器）是為了顯示資料的格式，它将$scope上的Model資料格式化View顯示的資料綁定到DOM之上。它并不會負責ngModel的綁定值的格式化。

在Angular中ngModel作為Angular雙向綁定中的重要組成部分，負責View控件互動資料到$scope上Model的同步。當然這裡存在一些差異，View上的顯示和輸入都是字元串類型，而在Model上的資料則是有特定資料類型的，例如常用的Number、Date、Array、Object等。ngModel為了實作資料到Model的類型轉換，在ngModelController中提供了兩個管道數組$formatters和$parsers，它們分别是将Model的資料轉換為View互動控件顯示的值和将互動控件得到的View值轉換為Model資料。它們都是一個數組對象，在ngModel啟動資料轉換時，會以UNIX管道式傳遞執行這一系列的轉換。Angular允許我們手動的添加$formatters和$parsers的轉換函數（unshift、push）。同時在這裡也是做資料驗證的最佳時機，能夠轉換意味應該是合法的資料。

同時，我們也可以利用Angular指令的reuqire來擷取到這個ngModelController。如下方式來使用它的$parses和$formaters：

是以，開篇所描述的輸入控件的大寫格式化，則可以利用ngModelController實作，在對于View文字大小的格式化，這個特殊的場景下，利用css特性text-transform會更簡單。是以實作如下：

則，在HTML就可以如下方式使用指令：

本文轉自破狼部落格園部落格，原文連結：http://www.cnblogs.com/whitewolf/p/angular-input-box-format.html，如需轉載請自行聯系原作者