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的实现原理的模拟代码 -4 重要的扩展函数 extend
Aug 03 Javascript
在次封装easyui-Dialog插件实现代码
Nov 14 Javascript
js获取或设置当前窗口url参数的小例子
Oct 14 Javascript
javascript记录文本框内文字个数检测文字个数变化
Oct 14 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
Feb 27 Javascript
关于Javascript中defer和async的区别总结
Sep 20 Javascript
基于JavaScript实现图片剪切效果
Mar 07 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
Aug 16 Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
Dec 28 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
Oct 11 Javascript
vue插槽slot的理解和使用方法
Apr 03 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
Feb 01 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
mysql建立外键
2006/11/25 PHP
E路文章系统PHP
2006/12/11 PHP
PHP5中GD库生成图形验证码(有汉字)
2013/07/28 PHP
php禁用函数设置及查看方法详解
2016/07/25 PHP
PHP使用函数用法详解
2018/09/30 PHP
php+Ajax处理xml与json格式数据的方法示例
2019/03/04 PHP
php常用字符串查找函数strstr()与strpos()实例分析
2019/06/21 PHP
JavaScript入门教程(1) 什么是JS
2009/01/31 Javascript
js动态删除div元素基本思路及实现代码
2014/05/08 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
2015/11/30 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
2015/12/08 Javascript
深入浅析JavaScript中的作用域和上下文
2016/03/26 Javascript
jquery设置表单元素为不可用的简单代码
2016/07/04 Javascript
Bootstrap零基础学习第一课之模板
2016/07/18 Javascript
nodejs密码加密中生成随机数的实例代码
2017/07/17 NodeJs
快速搭建React的环境步骤详解
2017/11/06 Javascript
JS使用对象的defineProperty进行变量监控操作示例
2019/02/02 Javascript
Vue实现base64编码图片间的切换功能
2019/12/04 Javascript
使用python将mdb数据库文件导入postgresql数据库示例
2014/02/17 Python
在Python的Django框架中创建语言文件
2015/07/27 Python
Python 批量合并多个txt文件的实例讲解
2018/05/08 Python
python 快速把超大txt文件转存为csv的实例
2018/10/26 Python
Django后台管理系统的图文使用教学
2020/01/20 Python
Keras构建神经网络踩坑(解决model.predict预测值全为0.0的问题)
2020/07/07 Python
运行python提示no module named sklearn的解决方法
2020/11/29 Python
应届医学毕业生求职信分享
2013/12/02 职场文书
大学生职业生涯规划方案
2014/01/03 职场文书
小学科学教学反思
2014/01/26 职场文书
关于母亲节的感言
2014/02/04 职场文书
小学五年级学生评语
2014/04/22 职场文书
白酒营销策划方案
2014/08/17 职场文书
中国文明网向国旗敬礼活动精彩寄语2014
2014/09/27 职场文书
小学生交通安全寄语
2015/02/27 职场文书
物业项目经理岗位职责
2015/04/01 职场文书
Python基础之函数嵌套知识总结
2021/05/23 Python
MySql按时,天,周,月进行数据统计
2022/08/14 MySQL