AngularJS实现Input格式化的方法  更新时间:2016年11月07日 09:31:41   作者:破狼   这篇文章主要介绍了AngularJS实现Input格式化的方法,结合实例形式分析了AngularJS实现Input格式化的操作步骤与相关注意事项,需要的朋友可以参考下 本文实例讲述了AngularJS实现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指令的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就可以如下方式使用指令: 效果参见jsbin demo: http://jsbin.com/baqaso/edit?html,js,output 在这里利用了css text-transform特性,对于其它的方式,我们可以使用keydown、keyup、keypress等来实现。如inputMask和ngmodel-format。 希望本文所述对大家AngularJS程序设计有所帮助。 您可能感兴趣的文章: 深究AngularJS如何获取input的焦点(自定义指令) angularJS 中input示例分享 Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐) AngularJS Input 格式化 相关文章 AngularJS实现单一页面内设置跳转路由的方法 这篇文章主要介绍了AngularJS实现单一页面内设置跳转路由的方法,结合实例形式分析了AngularJS路由操作相关设置与使用技巧,需要的朋友可以参考下 2017-06-06 利用Angularjs和bootstrap实现购物车功能 在学习了如何简单开始一个Angular程序之后,跟着网上的教程我也来实现一个购物车功能,为了减少页面样式设计我使用了bootstrap来偷懒,现在分享给大家,有需要的可以参考借鉴。 2016-08-08 仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件 这篇文章主要为大家详细介绍了仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件的相关资料,感兴趣的小伙伴们可以参考一下 2016-07-07 Angular.JS内置服务$http对数据库的增删改使用教程 我们可以使用内置的$http服务直接同外部进行通信。$http服务只是简单的封装了浏览器原生的XMLHttpRequest对象,下面这篇文章主要给大家介绍了关于Angular.JS内置服务$http对数据库的增删改等操作的相关资料,需要的朋友可以参考下。 2017-05-05 AngularJS动态生成select下拉框的方法实例 这篇文章主要给大家介绍了关于AngularJS动态生成select下拉框的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用AngularJS具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧 2019-11-11 Angular 多模块项目构建过程 这篇文章主要介绍了Angular 多模块项目构建过程,本文大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 2020-02-02 Angular利用HTTP POST下载流文件的步骤记录 这篇文章主要给大家介绍了关于Angular利用HTTP POST下载流文件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者使用Angular具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧 2020-07-07 使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码 这篇文章主要介绍了使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下 2019-11-11 详解angular中的作用域及继承 本篇文章主要介绍了详解angular中的作用域及继承,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-05-05 关于Angularjs中自定义指令一些有价值的细节和技巧小结 这篇文章主要介绍了关于Angularjs中自定义指令一些有价值的细节和技巧小结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-04-04 最新评论

本文实例讲述了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如何获取input的焦点(自定义指令)
  • angularJS 中input示例分享
  • Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
张贴在3