AngularJS实现Input格式化的方法


Posted in Javascript onNovember 07, 2016

本文实例讲述了AngularJS实现Input格式化的方法。分享给大家供大家参考,具体如下:

今天在Angular中文群有位同学问到:如何实现对input box的格式化。如下的方式对吗?

<input type="text" ng-model="demo.text | uppercase" />

这当然是不对的。在Angular中filter(过滤器)是为了显示数据的格式,它将$scope上的Model数据格式化View显示的数据绑定到DOM之上。它并不会负责ngModel的绑定值的格式化。

在Angular中ngModel作为Angular双向绑定中的重要组成部分,负责View控件交互数据到$scope上Model的同步。当然这里存在一些差异,View上的显示和输入都是字符串类型,而在Model上的数据则是有特定数据类型的,例如常用的Number、Date、Array、Object等。ngModel为了实现数据到Model的类型转换,在ngModelController中提供了两个管道数组$formatters和$parsers,它们分别是将Model的数据转换为View交互控件显示的值和将交互控件得到的View值转换为Model数据。它们都是一个数组对象,在ngModel启动数据转换时,会以UNIX管道式传递执行这一系列的转换。Angular允许我们手动的添加$formatters和$parsers的转换函数(unshift、push)。同时在这里也是做数据验证的最佳时机,能够转换意味应该是合法的数据。

同时,我们也可以利用Angular指令的reuqire来获取到这个ngModelController。如下方式来使用它的$parses和$formaters:

.directive('textTransform', [function() {
  return {
    require: 'ngModel',
    link: function(scope, element, iAttrs, ngModelCtrl) {
      ngModelCtrl.$parsers.push(function(value) {
        ...
      });
      ngModelCtrl.$formatters.push(function(value) {
        ...
      });
    }
  };
}]);

因此,开篇所描述的输入控件的大写格式化,则可以利用ngModelController实现,在对于View文字大小的格式化,这个特殊的场景下,利用css特性text-transform会更简单。所以实现如下:

.directive('textTransform', function() {
   var transformConfig = {
     uppercase: function(input){
       return input.toUpperCase();
     },
     capitalize: function(input){
       return input.replace(
         /([a-zA-Z])([a-zA-Z]*)/gi,
         function(matched, $1, $2){
          return $1.toUpperCase() + $2;
        });
     },
     lowercase: function(input){
       return input.toLowerCase();
     }
   };
  return {
    require: 'ngModel',
    link: function(scope, element, iAttrs, modelCtrl) {
      var transform = transformConfig[iAttrs.textTransform];
      if(transform){
        modelCtrl.$parsers.push(function(input) {
          return transform(input || "");
        }); 
        element.css("text-transform", iAttrs.textTransform);
      }
    }
  };
});

则,在HTML就可以如下方式使用指令:

<input type="text" ng-model="demo.text" text-transform="capitalize" />
<input type="text" ng-model="demo.text" text-transform="uppercase" />
<input type="text" ng-model="demo.text" text-transform="lowercase" />

效果参见jsbin demo: http://jsbin.com/baqaso/edit?html,js,output

在这里利用了css text-transform特性,对于其它的方式,我们可以使用keydown、keyup、keypress等来实现。如inputMask和ngmodel-format。

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
jquery图片不完全按比例自动缩小的简单代码
Jul 29 Javascript
JS实现局部选择打印和局部不选择打印
Apr 03 Javascript
JsRender实用入门教程
Oct 31 Javascript
js实现微信分享代码
Oct 11 Javascript
详解Webwork中Action 调用的方法
Feb 02 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
Apr 28 Javascript
前端程序员必须知道的高性能Javascript知识
Aug 24 Javascript
Angular.js中处理页面闪烁的方法详解
Mar 09 Javascript
如何编写一个完整的Angular4 FormText 组件
Nov 18 Javascript
vue router导航守卫(router.beforeEach())的使用详解
Apr 19 Javascript
微信小程序转化为uni-app项目的方法示例
May 22 Javascript
Vue移动端项目实现使用手机预览调试操作
Jul 18 Javascript
AngularJS自定义插件实现网站用户引导功能示例
Nov 07 #Javascript
webpack常用配置项配置文件介绍
Nov 07 #Javascript
jQuery Mobile和HTML5开发App推广注册页
Nov 07 #Javascript
学习JavaScript图片预加载模块
Nov 07 #Javascript
pc加载更多功能和移动端下拉刷新加载数据
Nov 07 #Javascript
jquery html5 视频播放控制代码
Nov 06 #Javascript
js无提示关闭浏览器窗口的两种方法分析
Nov 06 #Javascript
You might like
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
PHP多种序列化/反序列化的方法详解
2017/06/23 PHP
PHP面向对象程序设计之接口的继承定义与用法详解
2018/12/20 PHP
Laravel-添加后台模板AdminLte的实现方法
2019/10/08 PHP
基于jquery的inputlimiter 实现字数限制功能
2010/05/30 Javascript
两种方法实现文本框输入内容提示消失
2013/03/17 Javascript
jquery的flexigrid无法显示数据提示获取到数据
2013/07/19 Javascript
nodejs事件的监听与触发的理解分析
2015/02/12 NodeJs
详解js中class的多种函数封装方法
2016/01/03 Javascript
浅谈JS原型对象和原型链
2016/03/02 Javascript
Bootstrap实现翻页效果
2017/11/27 Javascript
解决koa2 ctx.render is not a function报错问题
2018/08/07 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
2018/11/08 Javascript
es6基础学习之解构赋值
2018/12/10 Javascript
JavaScript数组特性与实践应用深入详解
2018/12/30 Javascript
JS实现的点击按钮图片上下滚动效果示例
2019/01/28 Javascript
vue自定义表单生成器form-create使用详解
2019/07/19 Javascript
design vue 表格开启列排序的操作
2020/10/28 Javascript
[02:58]献给西雅图的情书_高清
2014/05/29 DOTA
[01:31:03]DOTA2完美盛典全回顾 见证十五项大奖花落谁家
2017/11/28 DOTA
python模块之time模块(实例讲解)
2017/09/13 Python
python安装模块如何通过setup.py安装(超简单)
2018/05/05 Python
python模块smtplib实现纯文本邮件发送功能
2018/05/22 Python
python 定义n个变量方法 (变量声明自动化)
2018/11/10 Python
Python实现的远程文件自动打包并下载功能示例
2019/07/12 Python
Python调用C语言的实现
2019/07/26 Python
python用requests实现http请求代码实例
2019/10/31 Python
深入理解Python 多线程
2020/06/16 Python
惠普新加坡官方商店:HP Singapore
2020/04/17 全球购物
小学教育毕业生自荐信
2013/11/18 职场文书
酒吧创业计划书
2014/01/18 职场文书
双十佳事迹材料
2014/01/29 职场文书
研究生导师推荐信
2014/09/06 职场文书
2014全年工作总结
2014/11/27 职场文书
Python基础知识之变量的详解
2021/04/14 Python
vue递归实现树形组件
2022/07/15 Vue.js