AngularJS实现Input格式化的方法

作者: 暴走房产
来源: 51数据库
2021-09-21

本文实例讲述了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程序设计有所帮助。