angular.formatter

Work in Progress This page is currently being revised. It might be incomplete or contain inaccuracies.

Overview

The formatters are responsible for translating user readable text in an input widget to a data model stored in an application.

Writting your own Formatter

Writing your own formatter is easy. Just register a pair of JavaScript functions with angular.formatter. One function for parsing user input text to the stored form, and one for formatting the stored data to user-visible text.

Here is an example of a "reverse" formatter: The data is stored in uppercase and in reverse, while it is displayed in lower case and non-reversed. User edits are automatically parsed into the internal form and data changes are automatically formatted to the viewed form.

function reverse(text) {
  var reversed = [];
  for (var i = 0; i < text.length; i++) {
    reversed.unshift(text.charAt(i));
  }
  return reversed.join('');
}

angular.formatter('reverse', {
  parse: function(value){
    return reverse(value||'').toUpperCase();
  },
  format: function(value){
    return reverse(value||'').toLowerCase();
  }
});

Example

<script type="text/javascript"> function reverse(text) { var reversed = []; for (var i = 0; i < text.length; i++) { reversed.unshift(text.charAt(i)); } return reversed.join(''); } angular.formatter('reverse', { parse: function(value){ return reverse(value||'').toUpperCase(); }, format: function(value){ return reverse(value||'').toLowerCase(); } }); </script> Formatted: <input type="text" name="data" value="angular" ng:format="reverse"/> <br/> Stored: <input type="text" name="data"/><br/> <pre>{{data}}</pre>