Angular.js组件之input mask对input输入进行格式化详解

前言

最近因为项目的需要，经常有一些对input输入进行格式化的需求，以前做的时候在js中写指令进行处理，但是这样又要在js或者在java代码中将请求的数据进行还原，很是麻烦，于是在网上看到了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直接转为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;   }  };