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

Question

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

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

<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

这是@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>

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

这是一个小提琴

Answer 2

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

$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是一个数字时，它会被过滤，当它是一个字符串时，它会按原样输出。

Answer 3

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

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>