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中parents()和parent()的区别分析
Oct 28 Javascript
Javascript中拼接大量字符串的方法
Feb 05 Javascript
JavaScript列表框listbox全选和反选的实现方法
Mar 18 Javascript
js实现交换运动效果的方法
Apr 10 Javascript
JavaScript中数据结构与算法(四):串(BF)
Jun 19 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
Aug 17 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
Jan 19 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
Sep 07 Javascript
angularjs使用div模拟textarea文本框的方法
Oct 02 Javascript
react 原生实现头像滚动播放的示例
Apr 21 Javascript
jquery实现上传图片功能
Jun 29 jQuery
详解如何使用Node.js实现热重载页面
May 06 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
Session的工作方式
2006/10/09 PHP
php strrpos()与strripos()函数
2013/08/31 PHP
php中的ini配置原理详解
2014/10/14 PHP
PHP内存缓存Memcached类实例
2014/12/08 PHP
php使用Imagick生成图片的方法
2015/07/31 PHP
PHP未登录自动跳转到登录页面
2016/12/21 PHP
PHP使用redis位图bitMap 实现签到功能
2019/10/08 PHP
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
2013/03/21 Javascript
浅析js封装和作用域
2013/07/09 Javascript
解析jquery中的ajax缓存问题
2013/12/19 Javascript
jquery结合CSS使用validate实现漂亮的验证
2015/01/29 Javascript
AngularJS控制器详解及示例代码
2016/08/16 Javascript
js 颜色选择插件
2017/01/23 Javascript
jquery仿ps颜色拾取功能
2017/03/08 Javascript
jquery ajaxfileupload异步上传插件
2017/11/21 jQuery
小程序获取周围IBeacon设备的方法
2018/10/31 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
2019/01/08 Javascript
node.js监听文件变化的实现方法
2019/04/17 Javascript
layui实现三级联动效果
2019/07/26 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
2019/12/09 Javascript
[10:34]DOTA2上海特级锦标赛全纪录
2016/03/25 DOTA
python连接mongodb操作数据示例(mongodb数据库配置类)
2013/12/31 Python
python函数装饰器用法实例详解
2015/06/04 Python
python实现对excel进行数据剔除操作实例
2017/12/07 Python
matplotlib设置legend图例代码示例
2017/12/19 Python
Python实现将doc转化pdf格式文档的方法
2018/01/19 Python
Python倒排索引之查找包含某主题或单词的文件
2019/11/13 Python
python-numpy-指数分布实例详解
2019/12/07 Python
Python实现ElGamal加密算法的示例代码
2020/06/19 Python
浅谈css3中的前缀
2016/07/20 HTML / CSS
*p++ 自增p 还是p所指向的变量
2016/07/16 面试题
营销总经理岗位职责范本
2014/09/02 职场文书
如何书写你的职业生涯规划书?
2019/06/27 职场文书
《别在吃苦的年纪选择安逸》读后感3篇
2019/11/30 职场文书
微信小程序实现录音Record功能
2021/05/09 Javascript
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技