javascript 使用 ng-repeat 有条件地应用过滤器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17206062/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Conditionally apply filters with ng-repeat
提问by EnigmaRM
I have an object that contains a mixture of numbers and text for values. I'd like to apply the numbersfilter 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 | numberto the value formats the numbers, but leaves the string values empty (afterall, they aren't numbers).
我有一个包含数字和文本混合值的对象。numbers当它是一个数字时，我想将过滤器应用于对象的值（显然）。但是当它不是一个数字时，我就可以把它吐出来。| number照原样，应用到值格式化数字，但将字符串值留空（毕竟，它们不是数字）。
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?
我猜它必须是一个自定义过滤器（我还需要制作）。有没有办法在执行时仅在 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
};
回答by Dan
Here is the requested alternate version of the answer from @callmekatootie using ng-if(v1.1.5):
这是@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>
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.
这具有仅在数字元素上运行过滤器的优点。在这种情况下，这可能没什么好处，但在其他更复杂的过滤器情况下可能有用。要回答关于内置angular.isNumber函数的其他问题，@callmekatootie 确实在作用域函数中使用了它isNumber，它只是在视图中使用内置函数的包装器。
回答by callmekatootie
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 metricDatais a number, it is filtered and when it is a string, it is output as it is.
因此，当它metricData是一个数字时，它被过滤，当它是一个字符串时，它原样输出。
回答by Matt Oakley
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
这样 HTML 更简洁，并且 angular 不必重新绘制 dom 元素
<table>
<tr ng-repeat="(metric, metricData) in data">
<td>{{metric}}</td>
<td>{{metricData | metricDataFilter}}</td>
</tr>
</table>
