使用 ng-repeat 有条件地应用过滤器

Question

我有一个对象，其中包含值的数字和文本的混合。当对象的值是数字时（显然），我想将 numbers 过滤器应用于对象的值。但是当它不是一个数字时，我会接受它只是吐出字符串。照原样，将| number 应用于值会格式化数字，但会将字符串值留空（毕竟，它们不是数字）。

我猜它必须是一个自定义过滤器（我还需要制作）。在执行ng-repeat 时，有没有办法仅在 HTML 中执行此操作？

<table>
      <tr ng-repeat="(metric, metricData) in data">
        <td>{{metric}}</td>
        <td>{{metricData | number}}</td>
      </tr>
</table>

$scope.data = { name:"this is the name", 
                score:48
                outcome:"as expected",
                attendance:820,
                total:212.34
              };

Answer 1

我知道这很旧，但我认为最好的解决方案是将逻辑移至过滤器。

app.filter("metricDataFilter", function($filter) {
    return function(value) {
      if(angular.isNumber(value)) {
          return $filter("number", value);  
      }

      return value;
    }  
}

这样 HTML 更简洁，Angular 不用重绘 dom 元素

<table>
    <tr ng-repeat="(metric, metricData) in data">
        <td>{{metric}}</td>
        <td>{{metricData | metricDataFilter}}</td>
    </tr>
</table>

Answer 2

这是@callmekatootie 使用ng-if (v1.1.5) 要求的答案的替代版本：

<table>
    <tr ng-repeat="(metric, metricData) in data">
        <td>{{metric}}</td>
        <td ng-if="isNumber(metricData)">{{metricData | number}}</td>
        <td ng-if="!isNumber(metricData)">{{metricData}}</td>
    </tr>
</table>

这具有仅对数字元素运行过滤器的优点。在这种情况下，这可能没什么好处，但在其他更复杂的过滤器情况下可能很有用。为了回答您关于内置 angular.isNumber 的其他问题，@callmekatootie 确实在范围函数 isNumber 中使用了它，这只是在视图中使用内置函数的包装器。

Here is a fiddle

Answer 3

您可以这样尝试 - 在您的控制器中，您可以有一个函数来识别提供的值是字符串还是数字：

$scope.isNumber = function (value) {
    return angular.isNumber(value);
};

接下来，在您看来，您可以拥有以下内容：

<table>
    <tr ng-repeat="(metric, metricData) in data">
        <td>{{metric}}</td>
        <td ng-show="isNumber(metricData)">{{metricData | number}}</td>
        <td ng-hide="isNumber(metricData)">{{metricData}}</td>
    </tr>
</table>

因此，当metricData为数字时，将其过滤，当为字符串时，则按原样输出。