【问题标题】:AngularJS: Should I use a filter to convert integer values into percentages?AngularJS:我应该使用过滤器将整数值转换为百分比吗?
【发布时间】:2013-06-25 01:17:11
【问题描述】:

我需要从我的应用程序的用户那里收集变化率(百分比)。这是我正在使用的文本输入:

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

这种工作,但我不应该为此任务使用过滤器吗?我该怎么做?

【问题讨论】:

  • 过滤器用于将一个数组的内容映射到另一个数组。我认为你应该在控制器中进行转换。是什么阻止您使用控制器。
  • hmm - 我认为过滤器是针对 filtering 值的,所以我认为格式、转换等应该在过滤器中
  • 没有字段需要经过这个转换,我认为逻辑会在控制器中重复
  • 过滤器不更新模型数据,它们只是变换。指令是正确的方法。让我考虑一下
  • 我喜欢指令,但在这种情况下,我认为过滤器是更好的选择。它使(imo)一个更易读的模板有一个东西| asPercent 而不是指令。

标签: javascript angularjs angularjs-filter


【解决方案1】:

嗯,你只是用 ctrl.$parser 和 ctrl.$formatter 以绝对正确的方式做到了 您可以省略 $filter 的东西,那里绝对不需要它。 Just check it out 他们也不在那里使用过滤器。

【讨论】:

  • 你是对的 - 它有效 - 这是一个有效的 plunker:plnkr.co/edit/Pfzyn4Bmw2B9jJzDVU1g?p=preview
  • 实际上,我真的很惊讶你能用指令、所需的 ngModelDirective、格式化程序和所有这些东西做所有这些正确的事情,并且突然有了这个过滤器:)
  • 好的,所以我实际上在 SO 上发现了代码 sn-p,它对我来说似乎并且仍然看起来很神秘。我原以为过滤器会转换模型数据并将其从视图传递到控制器,但事实并非如此。
【解决方案2】:

我认为你应该使用指令。如果您认为您将要退回到使用 JQuery 来开始操作 DOM 元素,那么指令可能就是您想要的。

这是一个过滤器示例:http://embed.plnkr.co/TT6ZwOF6nYXwMcemR3JF/preview

您可以过滤作为监视事件一部分输入的值。不过,这取决于您的具体用例。

【讨论】:

  • 欣赏这个例子,但我想我不明白的是过滤器只代表数据——它们不更新模型数据——所以我想我想要的是这样做的东西——在那种情况下我的代码示例仍然存在
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2011-12-31
  • 2017-05-26
  • 1970-01-01
  • 1970-01-01
  • 2021-01-03
  • 2014-08-17
  • 1970-01-01
相关资源
最近更新 更多