根据 ng-repeat 中的条件动态选择 angularjs 过滤器答案

【问题标题】：Choose angularjs filter dynamically based on condition in ng-repeat根据 ng-repeat 中的条件动态选择 angularjs 过滤器
【发布时间】：2017-01-09 21:31:48
【问题描述】：

我正在使用 ng-repeat 循环浏览项目列表。有一些值我想显示为简单的数字，如“435”或“43”，一些我想显示为双精度数字，如小数点后 2 位“545,32.43”或“343.32”，一些值是我想要的百分比显示为“75%”，有些是我想显示为“$65,434”的货币。

我知道 angularjs 为各种操作（数字、货币、百分比）等提供过滤器。

但是我怎样才能根据条件动态选择其中一个过滤器呢？

javascript

config:[
    {key:"Issue County",value:50,valColor:'#4caeed', type:'integer',dec_places:0},
    {key:"Issue Average", value:10.5356 ,valColor:'#4caeed', type:'double', dec_places:2},
    {key:"Issues Percentage", value:57, valColor:'#e54343', type:'percentage', dec_places:2},
    {key:"Total Amount", value:65000, valColor:'#4ca977', type:'currency', dec_places:0}
]

html

<ui class="subCardDiv" ng-repeat="conf in item.config">
    <li  style="display: inline;">
        <span class="cardDivKey" style="padding-top: 2px;">{{conf.key}} </span>
        <span class="cardDivVal" ng-style="{color:conf.valColor}" style="padding-top: 2px;">{{conf.value | number:conf.dec_places}} </span>
        <span ng-if="conf.text" class="cardDivText" style="padding-top: 2px;">{{conf.text}} </span>
    </li>
</ui>

【问题讨论】：

构建您自己的过滤器并将conf 对象传递给它。注入$filter 服务并在需要时调用适当的过滤器（请参阅this answer 了解如何执行此操作）。

标签： javascript html angularjs angularjs-ng-repeat angular-filters

【解决方案1】：

有很多方法可以做到这一点

Demo

ng-switch-approach

  <ui class="subCardDiv">
    <li style="display: inline;" ng-repeat="conf in item.config">
      <span class="cardDivKey" style="padding-top: 2px;">{{conf.key}} </span>
      <span ng-switch="conf.type">
          <span ng-switch-when="double" class="cardDivVal" ng-style="{color:conf.valColor}" style="padding-top: 2px;">{{conf.value | number:2}}</span>
      <span ng-switch-when="percentage" class="cardDivVal" ng-style="{color:conf.valColor}" style="padding-top: 2px;">{{conf.value+'%'}}</span>
      <span ng-switch-when="currency" class="cardDivVal" ng-style="{color:conf.valColor}" style="padding-top: 2px;">{{conf.value | currency}}</span>
      <span ng-switch-when="integer" class="cardDivVal" ng-style="{color:conf.valColor}" style="padding-top: 2px;">{{conf.value | number:0}}</span>
      <span ng-switch-default class="cardDivVal" ng-style="{color:conf.valColor}" style="padding-top: 2px;">{{conf.value}}</span>
      </span>
      <span ng-if="conf.text" class="cardDivText" style="padding-top: 2px;">{{conf.text}} </span>
    </li>
  </ui>

控制器功能选项

  $scope.displayConf = function(conf) {
    if (conf.type == 'double') {
      return $filter('number')(conf.value, 2);
    } else
    if (conf.type == 'integer') {
      return $filter('number')(conf.value);
    } else
    if (conf.type == 'percent') {
      return conf.value + '%';
    } else
    if (conf.type == 'currency') {
      return $filter('currency')(conf.value);
    } else
      return conf.value;
  };

你也可以写一个通用的过滤器

通用过滤器方法

filter('myFilter', function($filter) {
  return function(conf) {
    if (conf.type == 'double') {
      return $filter('number')(conf.value, 2);
    } else
    if (conf.type == 'integer') {
      return $filter('number')(conf.value);
    } else
    if (conf.type == 'percentage') {
      return conf.value + '%';
    } else
    if (conf.type == 'currency') {
      return $filter('currency')(conf.value);
    } else
      return conf.value;

  }

});

【讨论】：

【解决方案2】：

我认为使用 Angular 实现此目的的最佳方法是定义您自己的自定义过滤器。在该过滤器中，您可以运行 JavaScript 代码以有条件地将其他过滤器应用于您的值。

有大量关于在 AngularJS 中使用和创建过滤器以及它们的强大功能的文档。

那么在你自己的过滤器里面调用一个过滤器，this answer就不错了

请注意，所有这些都是针对 AngularJS v1，而不是 AngularJS v2

【讨论】：