AngularJS: Должен ли я использовать фильтр для преобразования целочисленных значений в проценты?

Мне нужно получить скорость изменения — в процентах — от пользователей моего приложения. Вот ввод текста, который я использую:

<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>

Теперь я хочу использовать фильтр, который принимает целое число, введенное пользователем, и преобразует его в процентное значение, умножая его на 0.01 или разделив на 100 прежде чем я отправлю его контроллеру для расчетов

Но я никак не могу понять, где разместить фильтр и как его зацепить. Итак, я попробовал это с такой директивой:

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

Это работает, но разве я не должен использовать фильтр для этой задачи? Как мне это сделать?


person Amit Erandole    schedule 27.06.2013    source источник
comment
Фильтр предназначен для сопоставления содержимого одного массива с другим. Я думаю, вы должны сделать преобразование в контроллере. Что мешает вам использовать контроллер.   -  person Chandermani    schedule 27.06.2013
comment
хм - я думал, что фильтры предназначены для значений filtering, поэтому я думал, что форматирование, преобразование и т. д. должны быть в фильтрах   -  person Amit Erandole    schedule 27.06.2013
comment
Нет полей, которые нужно пройти через это преобразование, и я думал, что логика будет повторяться в контроллере.   -  person Amit Erandole    schedule 27.06.2013
comment
Еще один фильтр не обновляет данные модели, они просто преобразуются. Директива - правильный путь. Дай мне подумать об этом   -  person Chandermani    schedule 27.06.2013
comment
Мой плохой фильтр может сопоставлять один тип с другим, но мой последний комментарий   -  person Chandermani    schedule 27.06.2013
comment
Я люблю директивы, но в этом случае я думаю, что фильтр — лучший выбор. Это делает (imo) более читаемым шаблон, чтобы иметь вещь | asPercent вместо директивы.   -  person Erik Honn    schedule 27.06.2013
comment
О, подождите, мой плохой. Использование фильтра для изменения данных перед отправкой их в контроллер довольно странно, я думал использовать фильтр для простого представления данных в шаблоне в процентах. Тогда я согласен, фильтр, вероятно, странный (и я не уверен, что он вообще работает на таком вводе).   -  person Erik Honn    schedule 27.06.2013
comment
Спасибо; Я использовал эту урезанную версию на основе отзывов kfis ниже. ``` app.directive 'percent', -› require: 'ngModel' link: (scope, ele, attr, ctrl) -› ctrl.$parsers.unshift (val) -› (parseFloat(val) / 100) ctrl .$formatters.unshift (val) -> Math.round(val * 100) + %   -  person Dave Burt    schedule 17.01.2014


Ответы (2)


Ну, вы только что сделали это абсолютно правильно с помощью ctrl.$parser и ctrl.$formatter. Вы просто можете не использовать $filter, он там абсолютно не нужен. Просто проверьте, там фильтр тоже не используется.

person kfis    schedule 27.06.2013
comment
Вы правы - это работает - вот рабочий плункер: plnkr.co/edit/Pfzyn4Bmw2B9jJzDVU1g?p =предварительный просмотр - person Amit Erandole; 27.06.2013
comment
На самом деле я действительно удивлен, что вы дошли до того, что сделали все эти правильные вещи с директивой, требуемой ngModelDirective, форматтерами и всем остальным, и вдруг у вас есть этот фильтр-ляп :) - person kfis; 27.06.2013
comment
Итак, я действительно нашел этот фрагмент кода на SO, и он казался и до сих пор кажется мне довольно загадочным. Я бы подумал, что фильтр преобразует данные модели и передает их из представления в контроллер, но это не так. - person Amit Erandole; 27.06.2013

Я думаю, вы должны использовать директиву. Если вы думаете, что собираетесь вернуться к использованию JQuery, чтобы начать манипулировать элементами DOM, то, вероятно, вам нужна директива.

Это пример фильтра: http://embed.plnkr.co/TT6ZwOF6nYXwMcemR3JF/preview

Что вы можете сделать, так это отфильтровать значение, которое вы вводите как часть события просмотра. Однако это зависит от вашего конкретного варианта использования.

person Greg    schedule 27.06.2013
comment
Ценю пример, но я думаю, что я не понял, что фильтры представляют только данные - они не обновляют данные модели - поэтому я думаю, что хочу что-то, что делает это - в этом случае мой пример кода все еще остается в силе - person Amit Erandole; 27.06.2013