Is it possible to transform a value between view and model in AngularJS for input?

Question

New to AngularJS. Trying to figure out how I would accomplish this, or if it is possible at all.

I know I can bound a value to the input box by using

<input type="number" ng-model="myvalue"> 

But what if I want it such that the value between the model and the view is transformed?

For example, for currency, I like to store my value in cents. However, I want to allow my users to enter dollar amounts. So I need to convert the value by a factor of 100 between the view and controller, i.e. in the model I would have 100, and in the view, I would have 1.

Is that possible? If so, how can I achieve that?

Answer 1

I ran into the same problem as you. I started using wciu's solution but ran into an issue where the values would flicker between the cents and dollars. I ended up hooking into the pipeline that is used to do the binding between view and model.

merchantApp.directive('transformTest', function() {   return { restrict: 'A',     require: 'ngModel',     link: function(scope, element, attrs, ngModel) {        if(ngModel) { // Don't do anything unless we have a model          ngModel.$parsers.push(function (value) {           return value*100;         });          ngModel.$formatters.push(function (value) {           return value/100;         });        }     }   }; });