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 相关文章推荐
JavaScript高级程序设计 DOM学习笔记
Sep 10 Javascript
可自定义速度的js图片无缝滚动示例分享
Jan 20 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
May 06 Javascript
jquery Easyui快速开发总结
Aug 20 Javascript
JavaScript中的this使用详解
Jul 27 Javascript
Bootstrap基本样式学习笔记之表格(2)
Dec 07 Javascript
如何从零开始利用js手写一个Promise库详解
Apr 19 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
Nov 14 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
Sep 02 Javascript
使用layui实现树形结构的方法
Sep 20 Javascript
JQuery表单元素取值赋值方法总结
May 12 jQuery
vue组件讲解(is属性的用法)模板标签替换操作
Sep 04 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
详细介绍:Apache+PHP+MySQL配置攻略
2006/09/05 PHP
PHP 上传文件的方法(类)
2009/07/30 PHP
Php中用PDO查询Mysql来避免SQL注入风险的方法
2013/04/25 PHP
ThinkPHP实现动态包含文件的方法
2014/11/29 PHP
微信支付开发维权通知实例
2016/07/12 PHP
PHP实现的简单在线计算器功能示例
2017/08/02 PHP
laravel 框架执行流程与原理简单分析
2020/02/01 PHP
javascript 处理事件绑定的一些兼容写法
2009/12/24 Javascript
javascript中定义类的方法汇总
2014/12/28 Javascript
JS动态给对象添加属性和值的实现方法
2016/10/21 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
JS实现的简单轮播图运动效果示例
2016/12/22 Javascript
详解利用jsx写vue组件的方法示例
2017/07/17 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
2017/08/22 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
2017/10/21 Javascript
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
vue调试工具vue-devtools安装及使用方法
2018/11/07 Javascript
通过javascript实现扫雷游戏代码实例
2020/02/09 Javascript
修改NPM全局模式的默认安装路径的方法
2020/12/15 Javascript
[01:48]2018DOTA2亚洲邀请赛主赛事第二日五佳镜头 VG完美团战逆转TNC
2018/04/05 DOTA
Python守护进程(daemon)代码实例
2015/03/06 Python
Django的信号机制详解
2017/05/05 Python
python2.7实现邮件发送功能
2018/12/12 Python
python实现多层感知器MLP(基于双月数据集)
2019/01/18 Python
Python和Go语言的区别总结
2019/02/20 Python
python实现简单聊天室功能 可以私聊
2019/07/12 Python
Python 实现的 Google 批量翻译功能
2019/08/26 Python
pytorch之inception_v3的实现案例
2020/01/06 Python
使用OpenCV对车道进行实时检测的实现示例代码
2020/06/19 Python
总结html5自定义属性有哪些
2020/04/01 HTML / CSS
科级干部考察材料
2014/02/15 职场文书
超市优秀员工获奖感言
2014/08/15 职场文书
2014国庆节商场促销活动策划方案
2014/09/16 职场文书
2015新学期开学寄语
2015/02/26 职场文书
小学一年级班主任工作经验交流材料
2015/11/02 职场文书
Java实现带图形界面的聊天程序
2022/06/10 Java/Android