今天在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. Android实战之你应该使用哪个网络库?

    前言 目前基本上每个应用都会使用HTTP/HTTPS协议来作为主要的传输协议来传输数据.即使你没有直接使用HTTP协议,也会有成堆的SDK会包含这些协议,譬如分析.Crash反馈等等.当然,目前也有很 ...

  2. oracle 大表删除数据后,回收空间的问题。

    在oracle中由于表结构设计不合理或者需要清楚老数据的时候,经常需要对大表数据进行清理. 一般有一下几种方法: 1. 删除大部分数据,留下小部分数据.我们可以把需要保留的数据转移到别的表,然后再把大 ...

  3. Android Loader详解一:概述

    装载器从android3.0开始引进.它使得在activity或fragment中异步加载数据变得简单.装载器具有如下特性: 它们对每个Activity和Fragment都有效. 他们提供了异步加载数 ...

  4. WCF简单教程

    WCF是DotNet体系中很重要的一项技术,但是组内很多组员通过书籍自学的时候 感觉涉及面太广.配置文件太复杂,新名词太多.抓不到头绪,有感于此,决定进行一次组内技术培训,顺便把培训讲义整理到blog ...

  5. VS2010引用项目dll,编译时报错

    截图出处:http://www.cnblogs.com/wuhuisheng/archive/2012/02/13/2349754.html

  6. 【转】qtp-learn

    1.计算器的例子(手动添加,将结果写到日志文件中) SystemUtil.Run "C:\WINDOWS\system32\calc.exe",""," ...

  7. Delphi 7下使用Log4Delphi 0.8日志组件

    Log4Delphi是一个开放源码项目,旨在制作用于Borland的Delphi高质量实用的日志套件,是基于Apache Software Foundation的log4j包. 安装:         ...

  8. 17 Great Machine Learning Libraries

    17 Great Machine Learning Libraries 08 October 2013 After wonderful feedback on my previous post on ...

  9. spider爬站极度损耗站点流量

    或许部分站长遇到过这样的情况,Baiduspider对一个网站的抓取频率要远高于新内容产出速度,造成了N多的流量被蜘蛛占用. 这样的情况一般是针对小站,因为大站访问量很大,蜘蛛对服务器的频繁访问不会有 ...

  10. [转]在MacOS和iOS系统中使用OpenCV

    OpenCV 是一个开源的跨平台计算机视觉库,实现了图像处理和计算机视觉方面的很多通用算法. 最近试着在MacOS和iOS上使用OpenCV,发现网上关于在MacOS和iOS上搭建OpenCV的资料很 ...