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

Question

我正在使用 ng-repeat 循环遍历项目列表。有些值我想显示为简单数字，如“435”或“43”，有些我想显示为 double ，如带 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-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>

Controller 功能选项

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

  }

});