The two-way data binding in AngularJS.

Original: 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 is handled by the | operator and an angular formatter . It turns out that the Ngmodel. A list of formatters but also a list of parsers.

1. Use ng-modelTo create the two-way data binding

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

2. Create a directive in your angular module, that'll be applied to the same element, and that depends on the ngModelController

Module.directive(' Lowercase ', function() { Return { Restrict: , require:  ' Ngmodel ' , Link:  (scope, element , Attr, Ngmodel  {  ...  } };               

3. Within the linkmethod, add your custom converters to the ngModelController

functionFromuser(Text) { Return (Text|| ‘‘).toUpperCase();}function Touser (text { return  ( Text | |   "). }ngmodel..fromuser. $formatters .touser        

4. ADD your new directive to the same element, 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 and back to uppercase in the input model

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

ShareEditEditedOct at 14:47answeredOct at 5:55Phaas2,35116

•   Is there any reason do used "Ngmodel" as the name for the fourth parametet in your linking function? Isn ' t that just a generic controllers for the directive that have basically nothing to does with the Ngmodel attribute? (still learning angular here so I could be totally wrong.)  – drew miller dec + ' at 1:52
• 6 Because of "require: ' Ngmodel '", the Linking function ' s 4th parameter would 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 want. (I would name it ngModelCtrl .) –mark rajcok Dec ' at 22:40
• 7 This technique was documented at Docs.angularjs.org/guide/forms, in the Custom Validation section.–nikhil Dabas F EB ' at 19:49
• 1 @Mark Rajcok in the fiddle provided, while C Licking Load Data--All lowercase, I expected the model value would is in all CAPS, but the model value is in small. Could you pls. explain why, and what to make the model always in Caps – rajkamal apr at 19:58 
• 1 @rajkamal, since LoadData2 () modifies   $scope  directly, that's what the model would be is set to ... until the user interacts with the textbox . At a, 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&N Bsp apr "at 21:06
• Hi Guys, I am new to angular and struck in Ngmodel, this explanation are Ok, but what I again feel, is so we can use $filters in directive like $filter (' uppercase ') (value) or $filter (' lowercase ') (value), and can do the operation, which is per Formed using Ngmodel. $parsers. push (Fromuser); Ngmodel. $formatters. push (Touser);, so when/why exactly we need ngmodel. Note:this May is a silly question or not valid, but please correct me. –ravi MoneApr 4 ' + at 12:16
• +1 for (text | | "), AHA moment–mahes Apr 9 ' + at 15:21
• What's If I want to show the lowercase letters while typing (i.e., on-change) Itself.–kishore relangi Jul 21 ' 1 5 at 11:46
• Thank you much! I is searching for this neat and Conciese example for 8 hours or so! the formatters and parsers SE Em to is a powerfull feature like JSF converters in Java–david.lucky Oct 7 ' 11:04
• @phaas thx for answers is looking for the same from last 2 Days–yogesh Mar ' + at 7:21

The two-way data binding in AngularJS.