本文實例講述了AngularJS實現Input格式化的方法。分享給大家供大家參考，具體如下：
今天在Angular中文群有位同學問到：如何實現對input box的格式化。如下的方式對嗎？
<input type="text" ng-model="demo.text | uppercase" />
這當然是不對的。在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：
.directive('textTransform', [function() { return { require: 'ngModel', link: function(scope, element, iAttrs, ngModelCtrl) { ngModelCtrl.$parsers.push(function(value) { ... }); ngModelCtrl.$formatters.push(function(value) { ... }); } };}]);因此，開篇所描述的輸入控件的大寫格式化，則可以利用ngModelController實現，在對于View文字大小的格式化，這個特殊的場景下，利用css特性text-transform會更簡單。所以實現如下：
.directive('textTransform', function() { var transformConfig = { uppercase: function(input){ return input.toUpperCase(); }, capitalize: function(input){ return input.replace( /([a-zA-Z])([a-zA-Z]*)/gi, function(matched, $1, $2){ return $1.toUpperCase() + $2; }); }, lowercase: function(input){ return input.toLowerCase(); } }; return { require: 'ngModel', link: function(scope, element, iAttrs, modelCtrl) { var transform = transformConfig[iAttrs.textTransform]; if(transform){ modelCtrl.$parsers.push(function(input) { return transform(input || ""); }); element.css("text-transform", iAttrs.textTransform); } } };});則，在HTML就可以如下方式使用指令：
<input type="text" ng-model="demo.text" text-transform="capitalize" /><input type="text" ng-model="demo.text" text-transform="uppercase" /><input type="text" ng-model="demo.text" text-transform="lowercase" />
效果參見jsbin demo： http://jsbin.com/baqaso/edit?html,js,output
在這里利用了css text-transform特性，對于其它的方式，我們可以使用keydown、keyup、keypress等來實現。如inputMask和ngmodel-format。
希望本文所述對大家AngularJS程序設計有所幫助。
新聞熱點
疑難解答
