Question

我正在使用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>

Answer 1

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

Demo

<强> NG-交换机的方法

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

  }

});

Answer 2

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

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

然后在您自己的过滤器中调用过滤器，this answer非常好

请注意，所有这些都适用于AngularJS v1，而不是AngularJS v2

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

的JavaScript

HTML

2 个答案: