angular.js/docs/angular.formatter.ngdoc

@workInProgress
@ngdoc overview
@name angular.formatter
@namespace Namespace for all formats.
@description
# 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.

<pre>
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();
  }
});
</pre>

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


@scenario
it('should store reverse', function(){
 expect(element('.doc-example input:first').val()).toEqual('angular');
 expect(element('.doc-example input:last').val()).toEqual('RALUGNA');
 
 this.addFutureAction('change to XYZ', function($window, $document, done){
   $document.elements('.doc-example input:last').val('XYZ').trigger('change');
   done();
 });
 expect(element('.doc-example input:first').val()).toEqual('zyx');
});