2016-02-19 35 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從未找到乾淨狀態的原因。