原文： 

------------------------------------------------------------------------------------------------------------

It turns out that there's a very elegant solution to this, but it's not well documented.

Formatting model values for display can be handled by the | operator and an angular formatter. It turns out that the ngModel that has not only a list of formatters but also a list of parsers.

1. Use ng-model to create the two-way data binding

2. Create a directive in your angular module that will be applied to the same element and that depends on the ngModel controller

module.directive('lowercase', function() { return { restrict: 'A', require: 'ngModel', link: function(scope, element, attr, ngModel) { ... } }; });

3. Within the link method, add your custom converters to the ngModelcontroller

function fromUser(text) { return (text || '').toUpperCase(); } function toUser(text) { return (text || '').toLowerCase(); } ngModel.$parsers.push(fromUser); ngModel.$formatters.push(toUser);

4. Add your new directive to the same element that already has the ngModel

Here's a  that transforms text to lowercase in the input and back to uppercase in the model

The  also has a brief explanation and an overview of the other available methods.

 

 

answered 

Oct 18 '12 at 5:55

2,3511106

•  
  IS there any reason you used "ngModel" as the name for the fourth parametet in your linking function? Isn't that just a generic controller for the directive that has basically nothing to do with the ngModel attribute? (Still learning angular here so I could be totally wrong.) –  
• 6
  Because of "require: 'ngModel'", the linking function's 4th parameter will be the ngModel directive's controller -- i.e., foo.bar's controller, which is an instance of . You can name the 4th parameter whatever you want. (I would name it ngModelCtrl.) –  
• 7
  This technique is documented at , in the Custom Validation section. –  
• 1
  @Mark Rajcok in the fiddle provided, while clicking Load Data -- all lowercase, i expected the model value would be in ALL CAPS, but the model value was in small. Could you pls. explain why, and how to make the model always IN CAPS –   
• 1
  @rajkamal, since loadData2() modifies $scope directly, that's what the model will be set to... until the user interacts with the textbox. At that point, any parsers can then affect the model value. In addition to a parser, you could add a $watch to your controller to transform the model value. –  
•  
  Hi Guys, i am new to angular and struck in ngModel, This explanation is Ok, but what i again feel, is that we can use $filters in directive like $filter('uppercase')(value) or $filter('lowercase')(value);and can do the operation that is performed using ngModel.$parsers.push(fromUser); ngModel.$formatters.push(toUser);, So when/why exactly we need ngModel. Note: This may be a silly question or not valid, But please correct me. –  
•  
  +1 for (text || ''), aha moment –  
•  
  What is If I want to show the lowercase letters while typing (i.e., on-change) itself. –   
•  
  thank you so much! i was searching for this neat and conciese example for 8 hours or so! the formatters and parsers seem to be a powerfull feature like JSF converters in java –  
•  
  @phaas thx for answers was looking for the same from last 2 days –