前言
最近因為項目的需要，經常有一些對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; } };html代碼：
<input type="text" ng-model="test1" input-mask="'y-m-d'" format-option="dateFormatOption"/>
另外，指令中的一些屬性需要注意：
inputMask主要是制定頁面展示的樣式：如展示銀行卡號的例子；
1、format-option主要是指定在格式化的時候解析、格式化和為空的時候，數據的格式；如日期處理，最后進行請求的時候就是傳入data類型；
2、isMask主要是指定頁面展示的是否是傳入后臺請求的數據，如卡號解析為XXXX XXXX XXXX XXXX，如果isMask為true則傳入后臺則為XXXX XXXX XXXX XXXX，否則為XXXXXXXXXXXXXXXX。
3、maskOption:指定頁面展示的樣式，同時也可以用回調，在完成和驗證的時候做一些處理動作。如下：
$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"); } }總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。
新聞熱點
疑難解答
