AngularJS实现Input格式化的方法
本文实例讲述了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程序设计有所帮助。
相关文章
这篇文章主要为大家详细介绍了angularjs创建弹出框实现拖动效果的相关资料，angularjs modal模态框创建可拖动的指令，感兴趣的小伙伴们可以参考一下2016-01-01
本篇文章主要介绍了浅谈AngularJs 双向绑定原理(数据绑定机制)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
这篇文章主要为大家详细介绍了angular分页指令操作的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
本文主要讲解了Angular的路由动画和高阶动画函数，对此感兴趣的同学，可以把代码亲自实验一下，理解其原理。2021-05-05
这篇文章主要介绍了Angular父子组件通过服务传参的示例方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
详解AngularJS controller调用factory
本篇文章主要介绍了详解AngularJS controller调用factory，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
这篇文章主要介绍了angular4自定义组件非input元素实现ngModel双向数据绑定的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要介绍了Angularjs实现控制器之间通信方式,结合实例形式总结分析了AngularJS控制器常用通信方式及相关操作注意事项,需要的朋友可以参考下2018-03-03
这篇文章主要介绍了Angular2.0实现modal对话框的方法,结合实例形式分析了angular2.0实现modal对话框的样式、界面及功能等相关操作技巧,需要的朋友可以参考下2018-02-02
这篇文章主要介绍了AngularJS实现动态切换样式的方法,结合实例形式分析了AngularJS事件响应与样式动态控制相关操作技巧,需要的朋友可以参考下2018-06-06
最新评论