Angular.js组件之input mask对input输入进行格式化详解
时间:2019-03-30
本文章向大家介绍Angular.js组件之input mask对input输入进行格式化详解,主要包括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; } };
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"); } }
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。
- 大圣魔方——美团点评酒旅BI报表工具平台开发实践
- 详析获取标签
- 深度学习及AR在移动端打车场景下的应用
- R案例操作:RQDA和tm包结合进行文本挖掘
- 用Vue.js开发微信小程序:开源框架mpvue解析
- 分类模型的性能评估——以SAS Logistic回归为例: 混淆矩阵
- R语言,你要怎样画地图?
- R语言绘制中国地图,并展示流行病学数据
- 使用R语言构造投资组合
- R语言构建追涨杀跌量化交易模型
- 美团点评境外度假团队前端项目开发实践总结
- 在jfinal中使用druid,并配置查看权限
- java中遇到过的String的一些特性
- Kaggle案例——使用scikit-learn解决DigitRecognition问题
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Swagger 3.0 官方 starter 诞生了,其它的都可以扔了~
- 原码+反码+补码概述与示范
- HTTP客户端连接,选择HttpClient还是OkHttp?
- 数据类型(基本数据类型和引用数据类型)范围与字符转换,代码示例+个位十位百位相加面试题
- Scanner关键字的使用+代码介绍+注意事项
- 将一个txt文件,复制到另一个txt文件中(缓冲字节流(BufferedInputStream,BufferedOutputStream))
- java实现客户端服务端互发消息并接收
- 使用NIO实现非阻塞式(相对的)多人聊天室
- 三次握手与四次挥手+图解
- 单例模式-->饿汉式+懒汉式
- 非常有必要了解的Springboot启动扩展点
- 冒泡排序图解+代码示例
- 使用prepareStatement连接数据库实现增、删、改、查
- 插入排序图解与代码示例
- 初步使用Druid连接池+代码示例:对图书进行增删改查