【轉】Angular Input格式化

時間 2019-12-20

原文原文鏈接

今天在Angular中文羣有位同窗問到：如何實現對input box的格式化。以下的方式對嗎？css

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

這固然是不對的。在Angular中filter（過濾器）是爲了顯示數據的格式，它將$scope上的Model數據格式化View顯示的數據綁定到DOM之上。它並不會負責ngModel的綁定值的格式化。html

在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）。同時在這裏也是作數據驗證的最佳時機，可以轉換意味應該是合法的數據。git

同時，咱們也能夠利用Angular指令的reuqire來獲取到這個ngModelController。以下方式來使用它的$parses和$formaters：github

.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會更簡單。因此實現以下：api

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