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

Posted 2023-03-05

【中文标题】使用 ng-repeat 有条件地应用过滤器

【英文标题】：Conditionally apply filters with ng-repeat

【发布时间】：2013-06-16 20:42:04

【问题描述】：

我有一个对象，其中包含值的数字和文本的混合。当对象的值是数字时（显然），我想将 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
              ;

【问题讨论】：

您知道，客户过滤器不是一个坏方法......

我想不是。我只是还没学会怎么做。也许是我学习的时候了。哈。

【参考方案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>

【参考方案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

【讨论】：

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

@callmekatootie 我想是的，表达式似乎只支持作用域上的变量。

【参考方案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为数字时，将其过滤，当为字符串时，则按原样输出。

【讨论】：

+1 变体可以使用ng-if (v. 1.1.5+)，因此在关闭的情况下根本不会过滤数据集（这可以节省大型数据集/复杂的时间过滤器）。

我喜欢这个解决方案。 Angular 没有内置的 isNumber 指令吗？ angular.isNumber?我尝试将其用于其他用途，但无法在 HTML 中使用。

@sh0ber 使用ng-if 的正确语法是什么？我刚刚将我的角度版本升级到 1.1.5。但我没有找到任何关于使用该指令的文档。刚刚被告知“像 ng-switch 一样使用它”...您愿意使用 nf-if 提交解决方案吗？谢谢。

我认为在

上显示/隐藏可能会导致问题...最好使用 ng-if / ui-if