1 files changed, 82 insertions, 0 deletions
diff --git a/docs/content/api/angular.formatter.ngdoc b/docs/content/api/angular.formatter.ngdoc
new file mode 100644
index 00000000..4eef190e
--- /dev/null
+++ b/docs/content/api/angular.formatter.ngdoc
@@ -0,0 +1,82 @@
+@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
+<doc:example>
+ <doc:source>
+  <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>
+ </doc:source>
+ <doc:scenario>
+  it('should store reverse', function(){
+   expect(element('.doc-example-live input:first').val()).toEqual('angular');
+   expect(element('.doc-example-live input:last').val()).toEqual('RALUGNA');
+
+   this.addFutureAction('change to XYZ', function($window, $document, done){
+     $document.elements('.doc-example-live input:last').val('XYZ').trigger('change');
+     done();
+   });
+   expect(element('.doc-example-live input:first').val()).toEqual('zyx');
+  });
+ </doc:scenario>
+</doc:example>
+