angularjs - 为什么我会在这里收到无限摘要错误？

Question

我需要创建一组平面数组，这样我就可以使用 CSS 网格系统打开和关闭网格行。

这是我的 HTML 的样子:

<div ng-repeat="row in items | GroupsOf: 3" class="row">
    [show stuff]
</div>

这是我为支持这一点而编写的过滤器:

.filter('GroupsOf', function(){     
    //Takes an array of things and groups them into  
    // sub-arrays with numPerGroup things in each 
    return function(things, numPerGroup){

        var i, group = -1, groups = []          
        for(i = 0; i < things.length; i++){
            //if it's a new group:
            if(i % numPerGroup === 0){                  
                groups.push([])
                group++
            }
            groups[group].push(things[i])
        }
        return groups//
    }
})

虽然一切都按预期呈现，但在运行时出现无限摘要错误，因此并非所有内容都正确连接。为什么会出现该错误，以及如何修复过滤器使其正常工作而不会出错？

我真的更喜欢将此作为过滤器而不是在 Controller 中对数据进行分组，但如果有人能向我解释为什么它不能作为过滤器实现，我会选择后面的路线。

Answer 1

如果你想在 Controller 中使用 $filter(这当然更高效并且修复了无限 $digest 循环问题)你可以这样做:

angular.module('myApp', [])
.controller('myCtrl', function($scope, $filter) {
    $scope.items = [
    'one','two','three',
    'unos','dos','tres',
    'uno','due','tre'
    ]
    $scope.grouped = $filter('GroupsOf')($scope.items , 3)
    console.log($scope.grouped)
})
.filter('GroupsOf', function(){     
//Takes an array of things and groups them into  
// sub-arrays with numPerGroup things in each 
return function(things ,numPerGroup){
    var i, group = -1, res = []          
    for(i = 0; i < things.length ; i++){
        //if it's a new group:
        if(i % numPerGroup === 0){                  
            res.push([])
            group++
        }
        res[group].push(things[i])
    }
    return res
}
})

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  
<div ng-repeat="row in grouped" class="row">
    {{row}}
</div>


</div>

看着infdig文档看来你的问题是由

引起的

.. binding to a function which generates a new array every time it is called.

这应该是 $digest 永远找不到干净状态的原因。