AngularJS method to implement Input formatting

This article describes the method of AngularJS implementing Input formatting. Share it for your reference, as follows:

Today, a classmate in the Angular Chinese group asked: How to format the input box. Is the following method correct?

<input type="text" ng-model=" | uppercase" />

Of course this is wrong. In Angular filter (filter) is to display the format of the data, which binds the data displayed by the Model data formatted on $scope to the DOM. It does not take care of the formatting of the binding values ​​of ngModel.

In Angular, ngModel is an important part of Angular bidirectional binding and is responsible for synchronizing the interactive data of the View control to the Model on $scope. Of course, there are some differences here. The display and input on the View are both string types, while the data on the Model has specific data types, such as the commonly used Number, Date, Array, Object, etc. ngModel In order to implement data to Model type conversion, two pipeline arrays $formatters and $parsers are provided in ngModelController. They are respectively converting the Model data into the value displayed by the View interactive control and converting the View value obtained by the interactive control into Model data. They are all array objects. When ngModel starts data conversion, this series of transformations will be performed in UNIX pipelined. Angular allows us to manually add $formatters and $parsers conversion functions (unshift, push). At the same time, it is also the best time to do data verification, and being able to convert data that should be legitimate.

At the same time, we can also use the reuqire of the Angular directive to get this ngModelController. Use its $parses and $formaters as follows:

.directive('textTransform', [function() {
  return {
    require: 'ngModel',
    link: function(scope, element, iAttrs, ngModelCtrl) {
      ngModelCtrl.$(function(value) {
        ...
      });
      ngModelCtrl.$(function(value) {
        ...
      });
    }
  };
}]);

Therefore, the uppercase formatting of the input control described at the beginning can be achieved using ngModelController. In this special scenario, using the css feature text-transform will be simpler in the formatting of the View text size. So the implementation is as follows:

.directive('textTransform', function() {
   var transformConfig = {
     uppercase: function(input){
       return ();
     },
     capitalize: function(input){
       return (
         /([a-zA-Z])([a-zA-Z]*)/gi,
         function(matched, $1, $2){
          return $() + $2;
        });
     },
     lowercase: function(input){
       return ();
     }
   };
  return {
    require: 'ngModel',
    link: function(scope, element, iAttrs, modelCtrl) {
      var transform = transformConfig[];
      if(transform){
        modelCtrl.$(function(input) {
          return transform(input || "");
        }); 
        ("text-transform", );
      }
    }
  };
});

Then, you can use the command in HTML as follows:

<input type="text" ng-model="" text-transform="capitalize" />
<input type="text" ng-model="" text-transform="uppercase" />
<input type="text" ng-model="" text-transform="lowercase" />

See jsbin demo: /baqaso/edit?html,js,output

Here we use the css text-transform feature. For other methods, we can use keydown, keyup, keypress, etc. to implement it. Such as inputMask and ngmodel-format.

I hope this article will be helpful to everyone's AngularJS programming.