2016-02-19 69 views
3

我需要创建一组以平面阵列形式出现的事物,因此我可以使用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// 
    } 
}) 

虽然东西呈现如预期,我得到无限的消化错误时,这个运行,因此并非所有东西都能正确连接。 为什么我得到这个错误,以及如何解决过滤器无法正常工作?

我真的更喜欢做这个过滤器而不是将数据分组到控制器中,但如果有人能向我解释为什么它不能作为过滤器来实现,我会去后面的路线。

+0

[show stuff]是否只显示值而不做任何额外处理? –

+0

你应该发布你的追踪 –

+0

@LuisMasuelli:即使有什么*在展示的东西,我得到的错误。 – Faust

回答

1

如果你想使用的控制器$过滤器(这当然是更好的性能,并修复了无限$消化循环问题),你可以这样做:

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文档似乎你的问题是由

..绑定到一个函数,每次产生一个新的数组 叫做。

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

相关问题