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 相关文章推荐
改版了网上的一个js操作userdata
Apr 27 Javascript
Highslide.js是一款基于js实现的网页中图片展示插件
Mar 30 Javascript
自定义jQuery选项卡插件实例
Mar 27 Javascript
jQuery中die()方法用法实例
Jan 19 Javascript
js实现拉幕效果的广告代码
Sep 02 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
Jan 24 Javascript
分享vue.js devtools遇到一系列问题
Oct 24 Javascript
React 项目迁移 Webpack Babel7的实现
Sep 12 Javascript
angular中如何绑定iframe中src的方法
Feb 01 Javascript
vue Tab切换以及缓存页面处理的几种方式
Nov 05 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 jQuery
vue实现简单计算商品价格
Sep 14 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动态图像的创建
2006/10/09 PHP
PHP缓存技术的使用说明
2011/08/06 PHP
phplot生成图片类用法详解
2015/01/06 PHP
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
2011/06/27 Javascript
使用JS读秒使用示例
2013/09/21 Javascript
详解iframe与frame的区别
2016/01/13 Javascript
JavaScript中的this机制
2016/01/30 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
2016/12/02 Javascript
JS仿京东移动端手指拨动切换轮播图效果
2020/04/10 Javascript
jQuery中animate的几种用法与注意事项
2016/12/12 Javascript
input输入密码变黑点密文的实现方法
2017/01/09 Javascript
使用原生js写ajax实例(推荐)
2017/05/31 Javascript
vue使用vue-cli快速创建工程
2017/07/28 Javascript
基于ajax和jsonp的原生封装(实例)
2017/10/16 Javascript
Webpack的dll功能使用
2018/06/28 Javascript
JS实现电话号码的字母组合算法示例
2019/02/26 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
微信小程序—setTimeOut定时器的问题及解决
2019/07/26 Javascript
jQuery提示框插件SweetAlert用法分析
2019/08/05 jQuery
vue 中 命名视图的用法实例详解
2019/08/14 Javascript
[03:14]DOTA2斧王 英雄基础教程
2013/11/26 DOTA
Python常见文件操作的函数示例代码
2011/11/15 Python
使用python获取CPU和内存信息的思路与实现(linux系统)
2014/01/03 Python
Python获取Linux系统下的本机IP地址代码分享
2014/11/07 Python
python中正则的使用指南
2016/12/04 Python
python中的随机函数小结
2018/01/27 Python
python Django 创建应用过程图示详解
2019/07/29 Python
python实现tail实时查看服务器日志示例
2019/12/24 Python
Pycharm连接gitlab实现过程图解
2020/09/01 Python
Python性能测试工具Locust安装及使用
2020/12/01 Python
用CSS3写的模仿iPhone中的返回按钮
2015/04/04 HTML / CSS
简单叙述一下MYSQL的优化
2016/05/09 面试题
道路建设实施方案
2014/03/18 职场文书
关工委先进个人事迹材料
2014/05/23 职场文书
大学生职业生涯规划大赛作品(精品)
2014/09/17 职场文书
单位委托书格式范本
2014/09/29 职场文书