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

Question

我正在使用 ng-repeat 遍历项目列表。有些值我想显示为简单的数字，如“435”或“43”，有些我想显示为双精度，如小数点后两位“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>

Answer 1

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

关于在 AngularJS 中使用和创建过滤器及其强大功能的文档很多。

然后在自己的过滤器中调用一个过滤器，this answer很好

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

Answer 2

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

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;

  }

});

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

Choose angularjs filter dynamically based on condition in ng-repeat

html

javascript

angularjs

angularjs-ng-repeat

angular-filters

javascript

html