天天看点

Angular Input格式化

今天在angular中文群有位同学问到:如何实现对input box的格式化。如下的方式对吗?

这当然是不对的。在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 Input格式化

同时,我们也可以利用angular指令的reuqire来获取到这个ngmodelcontroller。如下方式来使用它的$parses和$formaters:

因此,开篇所描述的输入控件的大写格式化,则可以利用ngmodelcontroller实现,在对于view文字大小的格式化,这个特殊的场景下,利用css特性text-transform会更简单。所以实现如下:

则,在html就可以如下方式使用指令:

继续阅读