本文實(shí)例講述了AngularJS實(shí)現(xiàn)Input格式化的方法。分享給大家供大家參考，具體如下：

今天在Angular中文群有位同學(xué)問(wèn)到：如何實(shí)現(xiàn)對(duì)input box的格式化。如下的方式對(duì)嗎？

<input type="text" ng-model="demo.text | uppercase" />

這當(dāng)然是不對(duì)的。在Angular中filter（過(guò)濾器）是為了顯示數(shù)據(jù)的格式，它將$scope上的Model數(shù)據(jù)格式化View顯示的數(shù)據(jù)綁定到DOM之上。它并不會(huì)負(fù)責(zé)ngModel的綁定值的格式化。

在Angular中ngModel作為Angular雙向綁定中的重要組成部分，負(fù)責(zé)View控件交互數(shù)據(jù)到$scope上Model的同步。當(dāng)然這里存在一些差異，View上的顯示和輸入都是字符串類型，而在Model上的數(shù)據(jù)則是有特定數(shù)據(jù)類型的，例如常用的Number、Date、Array、Object等。ngModel為了實(shí)現(xiàn)數(shù)據(jù)到Model的類型轉(zhuǎn)換，在ngModelController中提供了兩個(gè)管道數(shù)組$formatters和$parsers，它們分別是將Model的數(shù)據(jù)轉(zhuǎn)換為View交互控件顯示的值和將交互控件得到的View值轉(zhuǎn)換為Model數(shù)據(jù)。它們都是一個(gè)數(shù)組對(duì)象，在ngModel啟動(dòng)數(shù)據(jù)轉(zhuǎn)換時(shí)，會(huì)以UNIX管道式傳遞執(zhí)行這一系列的轉(zhuǎn)換。Angular允許我們手動(dòng)的添加$formatters和$parsers的轉(zhuǎn)換函數(shù)（unshift、push）。同時(shí)在這里也是做數(shù)據(jù)驗(yàn)證的最佳時(shí)機(jī)，能夠轉(zhuǎn)換意味應(yīng)該是合法的數(shù)據(jù)。

同時(shí)，我們也可以利用Angular指令的reuqire來(lái)獲取到這個(gè)ngModelController。如下方式來(lái)使用它的$parses和$formaters：

.directive('textTransform', [function() {
  return {
    require: 'ngModel',
    link: function(scope, element, iAttrs, ngModelCtrl) {
      ngModelCtrl.$parsers.push(function(value) {
        ...
      });
      ngModelCtrl.$formatters.push(function(value) {
        ...
      });
    }
  };
}]);

因此，開(kāi)篇所描述的輸入控件的大寫(xiě)格式化，則可以利用ngModelController實(shí)現(xiàn)，在對(duì)于View文字大小的格式化，這個(gè)特殊的場(chǎng)景下，利用css特性text-transform會(huì)更簡(jiǎn)單。所以實(shí)現(xiàn)如下：

.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" />

效果參見(jiàn)jsbin demo： http://jsbin.com/baqaso/edit?html,js,output

在這里利用了css text-transform特性，對(duì)于其它的方式，我們可以使用keydown、keyup、keypress等來(lái)實(shí)現(xiàn)。如inputMask和ngmodel-format。

希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。

最新評(píng)論