angular.formatter.html

<h1>angular.formatter</h1>
<div class="angular-formatter"><fieldset class="workInProgress"><legend>Work in Progress</legend>
This page is currently being revised. It might be incomplete or contain inaccuracies.</fieldset>
<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 Formatter</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><div ng:non-bindable><pre class="brush: js; html-script: true;">
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();
  }
});
</pre></div><h2>Example</h2>
<div class="example"><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('.doc-example input:first').val()).toEqual('zyx');
 });
</doc:scenario>
</doc:example></div>
</div>