angular.formatter.html

<h1>angular.formatter</h1>
<h2>Overview</h2>

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

<h2>Writting your own Fromatter</h2>

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

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

<pre class="brush: xml; brush: js;" ng:non-bindable>
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>
<h2>Example</h2>
<doc:example>
  <doc:source>
&lt;script type="text/javascript"&gt;
function reverse(text) {
  var reversed = [];
  for (var i = 0; i &lt; 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();
  }
});
&lt;/script&gt;

Formatted: 
&lt;input type="text" name="data" value="angular" ng:format="reverse"/&gt;
&lt;br/&gt;

Stored: 
&lt;input type="text" name="data"/&gt;&lt;br/&gt;
&lt;pre&gt;{{data}}&lt;/pre&gt;
  </doc:source>
  <doc: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('input:first').val()).toEqual('zyx');
});</doc:scenario>
</doc:example>