Issue
I posted the same question in different form, but no one answered. I am not getting a clear picture of what the Formatters and Parsers do in angular js.
By the definition, both the Formatters and Parsers look similar to me. Maybe I am wrong, as I am new to this angularjs.
Formatters Definition
Array of functions to execute, as a pipeline, whenever the model value changes. Each function is called, in turn, passing the value through to the next. Used to format / convert values for display in the control and validation.
Parsers Definition
Array of functions to execute, as a pipeline, whenever the control reads value from the DOM. Each function is called, in turn, passing the value through to the next. Used to sanitize / convert the value as well as validation. For validation, the parsers should update the validity state using $setValidity(), and return undefined for invalid values.
Please help me to understand both features with a simple example. A simple illustration of both will be appreciated.
Solution
This topic was covered really well in a related question: How to do two-way filtering in AngularJS?
To summarize:
- Formatters change how model values will appear in the view.
- Parsers change how view values will be saved in the model.
Here is a simple example, building on an example in the [NgModelController api documentation][1]:
//format text going to user (model to view)
ngModel.$formatters.push(function(value) {
return value.toUpperCase();
});
//format text from the user (view to model)
ngModel.$parsers.push(function(value) {
return value.toLowerCase();
});
You can see it in action: https://plnkr.co/plunk/UQ5q5FxyBzIeEjRYYVGX
<input type="button" value="set to 'misko'" ng-click="data.name='misko'"/>
<input type="button" value="set to 'MISKO'" ng-click="data.name='MISKO'"/>
<input changecase ng-model="data.name" />
When you type a name in (view to model), you will see that the model is always lowercase. But, when you click a button and programatically change the name (model to view), the input field is always uppercase. [1]: http://docs.angularjs.org/api/ng/type/ngModel.NgModelController
Answered By - j.wittwer
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.