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?

question from:https://stackoverflow.com/questions/13420693/is-it-possible-to-transform-a-value-between-view-and-model-in-angularjs-for-inpu

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;
        });

      }
    }
  };
});