【转】Angular 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 Demo
在这里利用了css text-transform特性,对于其它的方式,我们可以使用keydown、keyup、keypress等来实现。如
inputMask(https://github.com/greengerong/green.inputmask4angular)和
ngmodel-format(https://github.com/greengerong/ngmodel-format)。
【转】Angular Input格式化的更多相关文章
- Angular Input格式化
今天在Angular中文群有位同学问到:如何实现对input box的格式化.如下的方式对吗? <input type="text" ng-model="demo. ...
- angular input使用输入框filter格式化日期
最近使用angular日期选取器.只需要把所选的输出迄今input输入框,根据默认的假设,显示是在时间的形式的时间戳.不符合规定.需要格成一个特定的公式格公式.但input上ng-model不能直接对 ...
- angular input标签只能单向传递数据的问题
angularjs input标签只能单向传递数据的问题 <ion-view title = "{{roomName}}" style = "height:90%; ...
- angular input 为file on-change 无效
l转自:https://blog.csdn.net/klo220/article/details/53331229 侵删 出现这个问题是因为input的type是file,这时如果用ng-change ...
- angular input=file ng-change事件
首先 ng-change事件要与ng-model绑定 但是 当input 的 type=file时 ngchange事件是失效的 我们可以用图中的onchange事件去代替 其次 如果想在这 ...
- angular input file 上传文件
<body > <div ng-controller="fileCtrl"> <form ng-submit="submit(obj)&qu ...
- 四、用户交互(输入input,格式化输出)与运算符
1.接收用户的输入 在Python3:input会将用户输入的所有内容都存成字符串类型 列: username = input("请输入您的账号:") # "egon&q ...
- Angular input / ion-input ion-searchbar 实现软件盘换行 改 搜索 并且触发搜索方法 Android iOS适用
Angular 实现软件盘 换行 改 搜索 并且除非 搜索方法: Form 必须有 action="javascript: return true;” input / ion-in ...
- Angular @Input讲解及用法
1.什么是@input @input的作用是定义模块输入,是用来让父级组件向子组件传递内容. 2.@input用法 首先在子组件中将需要传递给父组件的变量用@input()修饰 需要在子组件ts文件i ...
随机推荐
- Android实战之你应该使用哪个网络库?
前言 目前基本上每个应用都会使用HTTP/HTTPS协议来作为主要的传输协议来传输数据.即使你没有直接使用HTTP协议,也会有成堆的SDK会包含这些协议,譬如分析.Crash反馈等等.当然,目前也有很 ...
- oracle 大表删除数据后,回收空间的问题。
在oracle中由于表结构设计不合理或者需要清楚老数据的时候,经常需要对大表数据进行清理. 一般有一下几种方法: 1. 删除大部分数据,留下小部分数据.我们可以把需要保留的数据转移到别的表,然后再把大 ...
- Android Loader详解一:概述
装载器从android3.0开始引进.它使得在activity或fragment中异步加载数据变得简单.装载器具有如下特性: 它们对每个Activity和Fragment都有效. 他们提供了异步加载数 ...
- WCF简单教程
WCF是DotNet体系中很重要的一项技术,但是组内很多组员通过书籍自学的时候 感觉涉及面太广.配置文件太复杂,新名词太多.抓不到头绪,有感于此,决定进行一次组内技术培训,顺便把培训讲义整理到blog ...
- VS2010引用项目dll,编译时报错
截图出处:http://www.cnblogs.com/wuhuisheng/archive/2012/02/13/2349754.html
- 【转】qtp-learn
1.计算器的例子(手动添加,将结果写到日志文件中) SystemUtil.Run "C:\WINDOWS\system32\calc.exe",""," ...
- Delphi 7下使用Log4Delphi 0.8日志组件
Log4Delphi是一个开放源码项目,旨在制作用于Borland的Delphi高质量实用的日志套件,是基于Apache Software Foundation的log4j包. 安装: ...
- 17 Great Machine Learning Libraries
17 Great Machine Learning Libraries 08 October 2013 After wonderful feedback on my previous post on ...
- spider爬站极度损耗站点流量
或许部分站长遇到过这样的情况,Baiduspider对一个网站的抓取频率要远高于新内容产出速度,造成了N多的流量被蜘蛛占用. 这样的情况一般是针对小站,因为大站访问量很大,蜘蛛对服务器的频繁访问不会有 ...
- [转]在MacOS和iOS系统中使用OpenCV
OpenCV 是一个开源的跨平台计算机视觉库,实现了图像处理和计算机视觉方面的很多通用算法. 最近试着在MacOS和iOS上使用OpenCV,发现网上关于在MacOS和iOS上搭建OpenCV的资料很 ...