Angularjs method of realizing input format _angularjs

This article illustrates the method of Angularjs to implement input format. Share to everyone for your reference, specific as follows:

Today in the angular Chinese group, a classmate asked: How to achieve the format of input box. Like the next way, right?

<input type= "text" ng-model= "Demo.text | Uppercase "/>

Of course it's not right. In angular filter (filter) is to display the format of the data, which binds the model data on the $scope to the DOM on the view display data. It is not responsible for formatting the Ngmodel binding value.

In angular, ngmodel as an important part of the angular two-way binding, responsible for the view control interaction data to the $scope model synchronization. Of course there are some differences, the view display and input are string types, while on the model data are specific data types, such as commonly used number, Date, Array, object, and so on. Ngmodel provides two pipeline arrays $formatters and $parsers in Ngmodelcontroller to achieve type conversion of data to model. They convert the model data to the values displayed by the View interaction control and convert the view value from the interactive control to model data. They are all an array object that performs this series of transformations in the form of a UNIX pipeline when Ngmodel initiates a data transformation. Angular allows us to manually add $formatters and $parsers conversion functions (unshift, push). Also here is the best time to do data validation, to be able to translate means that should be legitimate data.

At the same time, we can also use the angular instruction Reuqire to obtain this ngmodelcontroller. Use its $parses and $formaters in the following ways:

. directive (' texttransform ', [function () {return
  {
    require: ' Ngmodel ',
    link:function (scope, element, Iattrs, Ngmodelctrl) {
      Ngmodelctrl. $parsers. Push (function (value) {
        ...
      });
      Ngmodelctrl. $formatters. Push (function (value) {
        ..
      });

Therefore, the uppercase formatting of the input controls described in the opening statement can be implemented using Ngmodelcontroller, which makes it easier to use CSS features in this particular scenario in the format of view text size. text-transform So the implementation is as follows:

. 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, $) {return
          $1.touppercase () + $
        });
     },
     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);}}};

In HTML, you can use instructions in the following ways:

<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 "/>

Effects See Jsbin Demo:http://jsbin.com/baqaso/edit?html,js,output

Using CSS Text-transform features, we can use KeyDown, KeyUp, KeyPress, and so on in other ways. such as InputMask and Ngmodel-format.

I hope this article will help you to Angularjs program design.