有条件地应用与NG-重复过滤器 [英] Conditionally apply filters with ng-repeat

问题描述

我有一个包含数字的值的混合和文本的对象。我想在数字过滤器应用于对象的值时，它是一个数字（显然）。但是，当它不是一个数字，我会接受这个刚刚吐出的字符串。由于是采用 |号来的值​​格式的数字，但保留字符串值空的（毕竟，它们不是数字）。

我猜测它必须是一个自定义过滤器（我还没有过需要做）。有没有办法做的时候做单独在HTML中的 NG-重复？

 ＆LT;表＆gt;
      ＆LT; TR NG重复=（公制，metricData）数据＆GT;
        ＆所述; TD＆GT; {{度量}}＆下; / TD＆GT;
        ＆所述; TD＆GT; {{metricData |数}}＆LT; / TD＆GT;
      ＆LT; / TR＆GT;
＆LT; /表＆gt;$ scope.data = {名字：这是名，
                评分：48
                结果：预期，
                考勤：820，
                总：212.34
              };
 

解决方案

下面是一个使用 NG-如果（V1.1.5从@callmekatootie答案的要求备用版本）：

 ＆LT;表＆gt;
    ＆LT; TR NG重复=（公制，metricData）数据＆GT;
        ＆所述; TD＆GT; {{度量}}＆下; / TD＆GT;
        ＆LT; TD NG-IF =ISNUMBER（metricData）＆GT; {{metricData |数}}＆LT; / TD＆GT;
        ＆LT; TD NG-IF =ISNUMBER（metricData）！＆GT; {{metricData}}＆LT; / TD＆GT;
    ＆LT; / TR＆GT;
＆LT; /表＆gt;
 

这具有仅运行在其上是数字的元素滤波器的优点。这可能是在这种情况下，小的好处是，也可以是在其它更复杂的过滤器的情况下是有用的。为了回答你有关的其他问题的内置 angular.isNumber ，@callmekatootie确实使用，在功能范围 ISNUMBER ，这是仅适用于使用一个包装内置在视图中。

这里是一个小提琴

I have an object that contains a mixture of numbers and text for values. I'd like to apply the numbers filter to the object's value when it's a number (obviously). But when it isn't a number, I'd be okay with it just spitting out the string. As is, applying | number to the value formats the numbers, but leaves the string values empty (afterall, they aren't numbers).

I'm guessing it'll have to be a custom filter (which I have yet had a need to make). Is there a way to do it solely within the HTML when doing the 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
              };

解决方案

Here is the requested alternate version of the answer from @callmekatootie using 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>

This has the advantage of only running the filter on the elements which are numeric. This is probably of little benefit in this case but may be useful in other more complex filter situations. To answer your other question about the built-in angular.isNumber, @callmekatootie does use that in the scope function isNumber, which is only a wrapper for using the built-in in the view.

Here is a fiddle

这篇关于有条件地应用与NG-重复过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！