angularJS 中的two-way data binding.

Posted 2020-11-20 牛顿的小脑

原文： https://stackoverflow.com/questions/11616636/how-to-do-two-way-filtering-in-angularjs

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

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

<input type="text" ng-model="foo.bar"></input>

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

<input type="text" lowercase ng-model="foo.bar"></input>

Here‘s a working example that transforms text to lowercase in the input and back to uppercase in the model

The API Documentation for the Model Controller also has a brief explanation and an overview of the other available methods.

shareedit

edited Oct 18 ‘12 at 14:47

 

 

answered Oct 18 ‘12 at 5:55

phaas

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.) – Drew Miller Dec 17 ‘12 at 1:52
• 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 ngModelController. You can name the 4th parameter whatever you want. (I would name it ngModelCtrl.) – Mark Rajcok Dec 19 ‘12 at 22:40
• 7
  This technique is documented at docs.angularjs.org/guide/forms, in the Custom Validation section. – Nikhil Dabas Feb 12 ‘13 at 19:49
• 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 – rajkamal Apr 12 ‘13 at 19:58 
• 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. – Mark Rajcok Apr 12 ‘13 at 21:06
•  
  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. – RAVI MONEApr 4 ‘14 at 12:16 
•  
  +1 for (text || ‘‘), aha moment – Mahes Apr 9 ‘14 at 15:21
•  
  What is If I want to show the lowercase letters while typing (i.e., on-change) itself. – Kishore Relangi Jul 21 ‘15 at 11:46 
•  
  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 – david.lucky Oct 7 ‘15 at 11:04
•  
  @phaas thx for answers was looking for the same from last 2 days – Yogesh Mar 10 ‘16 at 7:21