ngModel Formatters and Parsers

by

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:

  //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: http://plnkr.co/UQ5q5FxyBzIeEjRYYVGX?plnkr=legacy

<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.

More Related Contents:

  1. How to set a selected option of a dropdown list control using angular JS
  2. What’s the difference between ng-model and ng-bind
  3. Using ng-repeat to generate select options (with Demo)
  4. Angular bootstrap datepicker date format does not format ng-model value
  5. Contenteditable with ng-model doesn’t work
  6. Is it feasible for a start-up of two developers to do full automated regression testing without manual testing? [closed]
  7. If you are not using a .(dot) in your AngularJS models you are doing it wrong?
  8. AngularJS execution order with `$q` — Chaining Promises
  9. AngularJS For Loop with Numbers & Ranges
  10. Show spinner GIF during an $http request in AngularJS?
  11. AngularJS-Twig conflict with double curly braces
  12. Can I make a function available in every controller in angular?
  13. How to send POST in angularjs with multiple params?
  14. unsafe link in angular
  15. Handle HTTP 302 response from proxy in angularjs
  16. How can I pass some data from one controller to another peer controller [duplicate]
  17. Angular – ui-router get previous state
  18. Binding variables from Service/Factory to Controllers
  19. Angularjs how to cancel resource promise when switching routes
  20. How to highlight a current menu item?
  21. Error : getaddrinfo ENOTFOUND registry.npmjs.org registry.npmjs.org:443
  22. Lazy loading AngularJS modules with RequireJS
  23. How to make orderby filter work on array of strings?
  24. stop angular-ui-router navigation until promise is resolved
  25. AngularJS: How to nest applications within an angular app
  26. Call Angular Function with Jquery
  27. AngularJS – why is $apply required to properly resolve a $q promise?
  28. $sce.trustAsResourceUrl() globally
  29. How do I filter an array with AngularJS and use a property of the filtered object as the ng-model attribute?
  30. Auto logout with Angularjs based on idle user

Leave a Comment