【轉】Angular 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   Demo

 

在這裡利用了css text-transform特性，對於其它的方式，我們可以使用keydown、keyup、keypress等來實現。如

inputMask(https://github.com/greengerong/green.inputmask4angular)和

ngmodel-format(https://github.com/greengerong/ngmodel-format)。

 

原文連結：http://mp.weixin.qq.com/s?__biz=MjM5NTM1NDcyOQ==&mid=208194273&idx=1&sn=edc72f510b8f61fbda7f608340edd4d0&scene=23&srcid=cDYrCTIg3j4NbreA8YEd#rd

【轉】Angular Input格式化