Conditionally apply filters with ng-repeat

问题

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

回答1:

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

回答2:

You could try it this way - In your controller, you can have a function which identifies if the provided value is a string or a number:

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

Next, in your view you could have the following:

<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>

Thus, when the metricData is a number, it is filtered and when it is a string, it is output as it is.

回答3:

I know this is old, but I think the best solution is to move the logic to a filter.

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

      return value;
    }  
}

That way the HTML is more concise, and angular won't have to redraw dom elements

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

来源：https://stackoverflow.com/questions/17206062/conditionally-apply-filters-with-ng-repeat

标签

angularjs

filter

angularjs-ng-repeat