javascript - Angular 1.0.8 : How to skip an iteration in ng-repeat

Question

有没有一种方法可以跳过 ng-repeat 中的迭代而不操作它迭代的底层数组/对象？

假设我们有这个:

var steps = [
    {
        enabled: true
    },
    {
        enabled: true
    },
    {
        enabled: false
    }
];

我想通过查看它的“enabled”键来跳过第三步。在更现代的 Angular 我会使用:

<div data-ng-repeat="step in steps" data-ng-if="step.enabled">

但是 ng-if 在 1.0.8 中不存在。

我试过像这样创建一个过滤器:

<div data-ng-repeat="step in steps | isEnabled" data-ng-if="step.enabled">

JS:

filter('isEnabled', function() {
    return function(input) {

        for(var i = 0; i < input.length; i++) {
            if(!input[i]['enabled']) {
                input.splice(i, 1);
            }
        };

        return input;
    };
})

但是，操作原始步骤对象是不可能发生的。然后我尝试克隆这些步骤:

filter('isEnabled', function() {
    return function(input) {

        var stepsBackup = angular.copy(input);

        for(var i = 0; i < stepsBackup.length; i++) {
            if(!stepsBackup[i]['enabled']) {
                stepsBackup.splice(i, 1);
            }
        };

        return stepsBackup;
    };
})

但这只会引发错误:错误:达到 10 次 $digest() 迭代。中止!...

我错过了什么？

Answer 1

无需定义自定义过滤器。如果您将对象作为 filter: 表达式传递，AngularJS 过滤器支持对属性进行过滤。例如:

<li ng-repeat="step in steps | filter: {enabled: true}">...</li>

看看这个 fiddle ，我认为它展示了你想要的东西(它使用 Angular 1.0.8):

http://jsfiddle.net/ck9u6/