javascript - 为什么这个分组 Angular 过滤器会导致摘要循环？

Question

我试图一次以 N 项为一组显示一堆项。我需要对项目进行分块，因为标记必须是表格/网格化的(每组 N 项有一行，然后每个项目有一列)。这是一个简化的尝试:

app.filter('inGroupsOf', function () {
    return function (input, groupSize) {
        if (!input) {
            return [];
        }
        var result = [];
        for (var index = 0; index < input.length; index++) {
            var groupIndex = Math.floor(index / groupSize);
            if (!result[groupIndex]) {
                result[groupIndex] = [];
            }
            result[groupIndex].push(input[index]);
        }
        return result;
    };
});

<div ng-controller="Ctrl">
    <div ng-repeat="itemGroup in items | inGroupsOf:7">
        <span ng-repeat="item in itemGroup">{{item.name}}</span>
    </div>
</div>

(完整版在这里:http://jsfiddle.net/bradleybuda/twhVj/3/)

这会导致“10 $digest() iterations reached”错误。我查看了 this question 的已接受答案但是那里的建议对我不起作用(除了对过滤器进行核对并在 Controller 中完成这一切)。有什么办法可以使这种 ng-repeat 与模板/过滤器一起工作吗？在 Controller 中做起来感觉很难看。

Answer 1

由于 Controller 中的第 12 行，发生了无限循环:

result[groupIndex] = [];

$digest 循环没有发生，因为您在定义的循环内创建数组，而是因为您将这些新数组嵌套在第 8 行创建的数组中:

var result = [];

即使您在 for 循环之外创建嵌套数组，也会发生同样的错误:

var result = [];
    result[0] = [];

嵌套对象也会发生同样的事情。至于“为什么”会发生这种情况，我不太确定。我已经阅读了 documentation但仍然不太明白为什么数组或对象的嵌套会导致 $digest 循环发生。将嵌套数组替换为字符串或数字，你就成功了。

我想在这种情况下，逻辑必须移回 Controller ，而不是作为过滤器调用。