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

虽然事情按预期呈现，但是当运行时我得到无限的摘要错误，因此并非所有内容都能正确连接。 为什么我会收到错误，如何修复过滤器无法正常工作？

我真的更愿意将此作为过滤器，而不是将数据分组到控制器中，但如果有人可以向我解释为什么它无法实现，我会选择后续路线作为过滤器。

Answer 1

如果你想在控制器中使用$ filter（这当然更高效并修复了无限$ digest循环问题），你可以这样做：

＆＃13;

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

＆＃13;

<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>

＆＃13;

查看infdig文档，您的问题似乎是由

引起的

..绑定到每次调用时生成新数组的函数。

这应该是$ digest从未找到干净状态的原因。

为什么我在这里得到无限的摘要错误？

1 个答案: