Question

有没有办法跳过ng-repeat中的迭代而不操纵它迭代的底层数组/对象？

说我们有这个：

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

我想通过查看它的＆＃34;启用＆＃34;跳过第三步。键。在更现代的角度我会用：

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

但是1.0.8中不存在ng-if。

我尝试创建一个这样的过滤器：

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

但这只会引发错误：Error: 10 $digest() iterations reached. Aborting! ......

我错过了什么？

Answer 1

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

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

看看这个小提琴，我认为它演示了你所追求的（它使用Angular 1.0.8）：

http://jsfiddle.net/ck9u6/

Angular 1.0.8：如何跳过ng-repeat中的迭代

1 个答案: