今天在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   Demo

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

inputMask(https://github.com/greengerong/green.inputmask4angular)和

ngmodel-format(https://github.com/greengerong/ngmodel-format)。

原文链接:http://mp.weixin.qq.com/s?__biz=MjM5NTM1NDcyOQ==&mid=208194273&idx=1&sn=edc72f510b8f61fbda7f608340edd4d0&scene=23&srcid=cDYrCTIg3j4NbreA8YEd#rd

【转】Angular Input格式化的更多相关文章

  1. Angular Input格式化

    今天在Angular中文群有位同学问到:如何实现对input box的格式化.如下的方式对吗? <input type="text" ng-model="demo. ...

  2. angular input使用输入框filter格式化日期

    最近使用angular日期选取器.只需要把所选的输出迄今input输入框,根据默认的假设,显示是在时间的形式的时间戳.不符合规定.需要格成一个特定的公式格公式.但input上ng-model不能直接对 ...

  3. angular input标签只能单向传递数据的问题

    angularjs input标签只能单向传递数据的问题 <ion-view title = "{{roomName}}" style = "height:90%; ...

  4. angular input 为file on-change 无效

    l转自:https://blog.csdn.net/klo220/article/details/53331229 侵删 出现这个问题是因为input的type是file,这时如果用ng-change ...

  5. angular input=file ng-change事件

    首先 ng-change事件要与ng-model绑定  但是 当input 的  type=file时   ngchange事件是失效的  我们可以用图中的onchange事件去代替 其次 如果想在这 ...

  6. angular input file 上传文件

    <body > <div ng-controller="fileCtrl"> <form ng-submit="submit(obj)&qu ...

  7. 四、用户交互(输入input,格式化输出)与运算符

    1.接收用户的输入 在Python3:input会将用户输入的所有内容都存成字符串类型 列: username = input("请输入您的账号:") # "egon&q ...

  8. Angular input / ion-input ion-searchbar 实现软件盘换行 改 搜索 并且触发搜索方法 Android iOS适用

    Angular 实现软件盘 换行 改 搜索 并且除非 搜索方法:    Form 必须有 action="javascript: return true;”   input / ion-in ...

  9. Angular @Input讲解及用法

    1.什么是@input @input的作用是定义模块输入,是用来让父级组件向子组件传递内容. 2.@input用法 首先在子组件中将需要传递给父组件的变量用@input()修饰 需要在子组件ts文件i ...

随机推荐

  1. WebService调用http://www.webxml.com.cn中的一些服务示例

    1.打开http://www.webxml.com.cn网站下的“全部WebService”,会看到如下图的图片 2.点击打开WSDL连接,如下图,并保存为一个后缀名为wsdl文件,放在项目的根目录下 ...

  2. 2.5.5 使用DatePickerDialog, TimePickerDialog

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout ...

  3. 《深入理解linux内核架构》第二章 进程管理和调度

    2.1进程优先级 进程优先级 硬实时进程 软实时进程 抢占式多任务处理 2.2进程生命周期 用户太切换到核心态的办法 系统调用 中断 抢占调度模型优先级普通进程<系统调用<中断 普通进程可 ...

  4. logstash 贪婪匹配

    05:50:47 192.168.5.116 GET /Hotel/HotelDisplay/cncqcqb230 - 80 - 192.168.9.2 Mozilla/5.0+(Macintosh; ...

  5. 【HDOJ】2544 最短路

    Dijkstra. #include <stdio.h> #include <string.h> #define INF 0xfffffff ][]; ]; ]; int ma ...

  6. java线程(3)-多线程死锁

    产生死锁的条件: 1.有至少一个资源不能共享2.至少有一个任务必须持有一个资源并且等待获取另一个被别的任务持有的资源3.资源不能任务抢占4.必须有循环等待 package com.thread; /* ...

  7. zabbix3.0配置邮件报警

    我们部署一套监控软件,报警这一块自然不可或缺,接下来我们看看zabbix如何实现邮件报警.   1.编写发送邮件的脚本 zabbix通脚本发送邮件,遵循的传参格式为: 脚本   收件人  标题  邮件 ...

  8. 设计模式(c#)代码总结

    设计模式分为三种类型 创建型模式:简单工厂.工厂方法模式.抽象工厂模式.建造者模式.原型模式.单例模式 结构型模式:适配器模式.桥接模式.装饰模式.组合模式.外观模式.享元模式.代理模式. 行为型模式 ...

  9. Unity3D游戏开发入门(一)

    视频: 慕课网适合入门 http://www.imooc.com/video/6582 蛮牛网: http://www.manew.com/ 圣殿中文手册 5.3.2破解工具 面试题 pdf 书籍:

  10. bzoj 4034 [HAOI2015] T2(树链剖分,线段树)

    4034: [HAOI2015]T2 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 1536  Solved: 508[Submit][Status] ...