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

- EnigmaRM

---

只是让你知道，客户过滤器并不是一个不好的方式... - callmekatootie

我想应该不难。只是我还没学会怎么做而已。也许现在是时候学一下了。哈。 - EnigmaRM

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>

这样做的优点是仅对数字元素运行过滤器。在这种情况下可能几乎没有好处，但在其他更复杂的过滤器情况下可能会有用。回答您关于内置angular.isNumber的其他问题，@callmekatootie确实在作用域函数isNumber中使用了它，该函数只是一个包装器，用于在视图中使用内置函数。

这里是一个代码演示

- Dan

---

我认为OP也想知道内置函数angular.isNumber()是否可以直接在HTML代码中使用，但我认为这是不可能的。正确吗？ - callmekatootie

@callmekatootie 我也这么认为，表达式似乎只支持有作用域的变量。 - Dan

Answer 2

我知道这篇文章有些老了，但我认为最好的解决方案是将逻辑移到过滤器中。

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>

- Matt Oakley

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

- callmekatootie

---

+1 一种变化可以使用 ng-if（v. 1.1.5+），这样数据集在关闭情况下就不会被过滤（这可能会节省大型数据集/复杂过滤器的时间）。 - Dan

我喜欢这个解决方案。Angular 没有内置的 isNumber 指令吗？angular.isNumber？我尝试在其他地方使用它，但无法在 HTML 中使其正常工作。 - EnigmaRM

@sh0ber，使用 ng-if 的正确语法是什么？我刚刚升级了我的Angular版本到1.1.5。但我没有找到任何有关该指令使用的文档。只被告知“像ng-switch一样使用”...你能否提交一个使用nf-if的解决方案？谢谢。 - EnigmaRM

我认为在<td>上使用show/hide可能会导致问题...最好使用ng-if / ui-if。 - Jason