Angular.js組件之input mask對input輸入進行格式化詳解

更新時間：2017年07月10日 10:12:55 作者：ngulc

這篇文章主要給大家介紹了關于Angular.js組件之input mask對input輸入進行格式化的相關內(nèi)容，文中通過示例代碼詳細介紹了將銀行卡號和日期的方法，需要的朋友們可以參考借鑒，下面來一起看看吧。

前言

最近因為項目的需要，經(jīng)常有一些對input輸入進行格式化的需求，以前做的時候在js中寫指令進行處理，但是這樣又要在js或者在java代碼中將請求的數(shù)據(jù)進行還原，很是麻煩，于是在網(wǎng)上看到了jquery的inputmask組件，覺得很好用，在項目中寫出指令，用起來很方便。

方法如下：

在項目中引入jquery和jquery-inputmask，然后在項目中寫指令，如下：

define(['./module'], function (directives) {
 'use strict';
 directives.directive('inputMask', function ($timeout) {
 return {
  restrict: 'EA',
  require: 'ngModel',
  link: function (scope, elm, attrs, ngModel) {
  var applyModelEvents = [ "oncomplete", "onKeyUp", "onKeyValidation" ], maskType = "mask";

  if (attrs.formatOption) {
   var formatOption = scope.$eval(attrs.formatOption);
   if (formatOption.parser) {
   ngModel.$parsers.push(formatOption.parser);
   }

   if (formatOption.formatter) {
   ngModel.$formatters.push(formatOption.formatter);
   }

   if (formatOption.isEmpty) {
   ngModel.$isEmpty = formatOption.isEmpty;
   }
  }

  var applyModel = function (fun) {
   return function () {
   (function (args) {
    $timeout(function () {
    var viewValue = elm.inputmask('unmaskedvalue');
    if (viewValue !== ngModel.$viewValue) {
     ngModel.$setViewValue(viewValue);
    }
    if (fun) {
     fun.apply(scope, args);
    }
    });
   })(Array.prototype.slice.call(arguments));
   };
  };

  var extendOption = function (option) {
   var newOption = angular.extend({}, option);
   angular.forEach(applyModelEvents, function (key) {
   newOption[key] = applyModel(newOption[key]);
   });

   return newOption;
  };

  if (attrs.inputMask) {
   maskType = scope.$eval(attrs.inputMask);
  }

  if (maskType) {
   if (angular.isObject(maskType)) {
   var maskOption = extendOption(maskType);
   $timeout(function () {
    elm.inputmask(maskOption);
   });
   } else {
   var maskOption = extendOption(scope.$eval(attrs.maskOption) || {});
   $timeout(function () {
    elm.inputmask(maskType, maskOption);
   });
   }
  }

  elm.bind("blur", function(){
   $timeout(function () {
   if(attrs.isMask){
    
   }else{
    ngModel.$setViewValue(elm.inputmask('unmaskedvalue'));
   }
   });
  });

  }
 }
 });
});

如需要將銀行卡號按銀行卡格式顯示：

html:

<input class="form-control" id="cardNo" name="cardNo" type="text" ng-model="cardNo" input-mask="cardOption"/>

angular controller中cardOption：

 $scope.cardOption = {
   mask: function () {
    return ["9999 9999 9999 9999 [999]"];
   }};

如果日期表示的時候，將string直接轉(zhuǎn)為data類型：

$scope.dateFormatOption = {
   parser: function (viewValue) {
   return viewValue ? new Date(viewValue) : undefined;
   },
   formatter: function (modelValue) {
   if (!modelValue) {
    return "";
   }
   var date = new Date(modelValue);
   return (date.getFullYear() + "-" + date.getMonth() + "-" + date.getDate()).replace(/\b(\d)\b/g, "0$1");
   },
   isEmpty: function (modelValue) {
   return !modelValue;
   }
  };

html代碼：

<input type="text" ng-model="test1" input-mask="'y-m-d'" format-option="dateFormatOption"/>

另外，指令中的一些屬性需要注意：

inputMask主要是制定頁面展示的樣式：如展示銀行卡號的例子；

　1、format-option主要是指定在格式化的時候解析、格式化和為空的時候，數(shù)據(jù)的格式；如日期處理，最后進行請求的時候就是傳入data類型；

　2、isMask主要是指定頁面展示的是否是傳入后臺請求的數(shù)據(jù)，如卡號解析為XXXX XXXX XXXX XXXX，如果isMask為true則傳入后臺則為XXXX XXXX XXXX XXXX，否則為XXXXXXXXXXXXXXXX。

3、maskOption:指定頁面展示的樣式，同時也可以用回調(diào)，在完成和驗證的時候做一些處理動作。如下：

$scope.testoption = {
  "mask": "99-9999999",
  "oncomplete": function () {
   console.log();
   console.log(arguments,"oncomplete!this log form controler");
  },
  "onKeyValidation": function () {
   console.log("onKeyValidation event happend! this log form controler");
  }
  }

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章: