The formatters are responsible for translating user readable text in an input widget to a data model stored in an application.
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(); } });
<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>
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'); });