您好,登录后才能下订单哦!
小编给大家分享一下Angular.js组件之input mask对input输入进行格式化的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
方法如下:
在项目中引入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"); } }
以上是“Angular.js组件之input mask对input输入进行格式化的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。