I need to collect a rate of change - in percentages - from my application's users. Here is the text input I am using:

<label for="annual-change" class="pt-underline"> I am anticipating
<input id="annual-change" ng-model="calc.yrChange"  type="text" placeholder="0" /> % of growth annually.<br><br>
</label>

Now what I want is to use a filter that takes the integer amount that the user inputs and convert it to a percentage by multiplying it by 0.01 or dividing it by 100 before I send it to the controller for calculations

But I just can't figure out where to place the filter and how to hook it. So I tried it with a directive like so:

    app.directive("percent", function($filter){
    var p = function(viewValue){
      console.log(viewValue);
      var m = viewValue.match(/^(\d+)/);
      if (m !== null)
        return $filter('number')(parseFloat(viewValue)/100);
    };

    var f = function(modelValue){
        return $filter('number')(parseFloat(modelValue)*100);
    };

    return {
      require: 'ngModel',
      link: function(scope, ele, attr, ctrl){
          ctrl.$parsers.unshift(p);
          ctrl.$formatters.unshift(f);
      }
    };
});

This kind of works but shouldn't I be using a filter for this task? How do I do this?

I need to collect a rate of change - in percentages - from my application's users. Here is the text input I am using:

<label for="annual-change" class="pt-underline"> I am anticipating
<input id="annual-change" ng-model="calc.yrChange"  type="text" placeholder="0" /> % of growth annually.<br><br>
</label>

Now what I want is to use a filter that takes the integer amount that the user inputs and convert it to a percentage by multiplying it by 0.01 or dividing it by 100 before I send it to the controller for calculations

But I just can't figure out where to place the filter and how to hook it. So I tried it with a directive like so:

    app.directive("percent", function($filter){
    var p = function(viewValue){
      console.log(viewValue);
      var m = viewValue.match(/^(\d+)/);
      if (m !== null)
        return $filter('number')(parseFloat(viewValue)/100);
    };

    var f = function(modelValue){
        return $filter('number')(parseFloat(modelValue)*100);
    };

    return {
      require: 'ngModel',
      link: function(scope, ele, attr, ctrl){
          ctrl.$parsers.unshift(p);
          ctrl.$formatters.unshift(f);
      }
    };
});

This kind of works but shouldn't I be using a filter for this task? How do I do this?

• javascript
• angularjs
• angularjs-filter

• Filter are there to map content of one array to another. I think you should do the conversion in controller. What is stopping you from using controller. – Chandermani Commented Jun 27, 2013 at 13:57
• hmm - I thought filters were for filtering values so I thought formatting, conversion etc should be in filters – Amit Erandole Commented Jun 27, 2013 at 13:58
• There are a no of fields that need to go through this conversion and I thought the logic would get repeated in the controller – Amit Erandole Commented Jun 27, 2013 at 13:59
• 1 One more thing filter do not update the model data, they just transform. Directive is a right way to go. Let me think about it – Chandermani Commented Jun 27, 2013 at 14:43
• 1 I love directives, but in this case I think a filter is the better choices. It makes (imo) for a more readable template to have a thing | asPercent instead of a directive. – Erik Honn Commented Jun 27, 2013 at 14:54

2 Answers 2

Well, you just did it the absolute right way with the ctrl.$parser and ctrl.$formatter You just can leave out the $filter thing, its absulotuly not needed there. Just check it out they don't use the filter there, too.

I think you should use a directive. If you think you are about to fall back to using JQuery to start manipulating the DOM elements then a directive is probably what you want.

This is an example of a filter: http://embed.plnkr.co/TT6ZwOF6nYXwMcemR3JF/preview

What you could do is filter the value you enter as part of a watch event. However that depends on your specific use case.