"Go" Angular input format

Today, in the angular Chinese group, a classmate asked: How to achieve the format of input box. Is that the way it is?

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

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

Ngmodel as an important part of angular bidirectional binding in angular, is responsible for synchronizing the view control interaction data to the model on $scope. Of course there are some differences, and the display and input on the view are string types, while the data on the model has a specific data type, such as the commonly used number, Date, Array, object, and so on. Ngmodel provides two pipe arrays $formatters and $parsers in Ngmodelcontroller in order to implement data-to-model type conversions, They convert the model data to the value displayed by the View interactive control and the view value from the interactive control to the model data, respectively. They are all an array object that performs this series of transformations as a Unix pipelined pass when the Ngmodel initiates a data transformation. Angular allows us to manually add $formatters and $parsers conversion functions (unshift, push). It is also the best time to do data validation, which translates to data that should be legitimate.

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

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

As a result, the uppercase formatting of the input controls described in the opening can be implemented using the Ngmodelcontroller implementation, which makes it easier to take advantage of CSS features in this particular scenario for formatting the view text size. text-transform So the implementation is as follows:

. directive (' Texttransform ',function() {     varTransformconfig ={uppercase:function(input) {returninput.touppercase (); }, Capitalize:function(input) {returnInput.replace (/([a-za-z]) ([a-za-z]*)/gi,function(Matched, $, $){                    return$1.touppercase () + $;         }); }, lowercase:function(input) {returninput.tolowercase ();    }     }; return{require:' Ngmodel ', Link:function(scope, element, Iattrs, Modelctrl) {varTransform =Transformconfig[iattrs.texttransform]; if(transform) {Modelctrl. $parsers. Push (function(input) {returnTransform (Input | | "");                 }); Element.css ("Text-transform", Iattrs.texttransform); }        }    };});

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

<inputtype= "text"Ng-model= "Demo.text"Text-transform= "Capitalize" /><inputtype= "text"Ng-model= "Demo.text"Text-transform= "Uppercase" /><inputtype= "text"Ng-model= "Demo.text"Text-transform= "lowercase" />

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

Using the CSS Text-transform feature here, we can use KeyDown, KeyUp, KeyPress and so on for other ways. Such as

InputMask (Https://github.com/greengerong/green.inputmask4angular) and

Ngmodel-format (Https://github.com/greengerong/ngmodel-format).

Original link: http://mp.weixin.qq.com/s?__biz=MjM5NTM1NDcyOQ==&mid=208194273&idx=1&sn= Edc72f510b8f61fbda7f608340edd4d0&scene=23&srcid=cdyrctig3j4nbrea8yed#rd

"Go" Angular input format