angular.js包裝時NG-重複

以下這個答案的基本思路上SO Angular.js ng-repeat: opening/closing elements after x iterations angular.js包裝時NG-重複

我分組項目，在一個div包裹它們後，並收到以下錯誤Error: 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations:

試圖多次迭代

這使我相信Angular期待重複10次，並且只註冊5.但是，輸出看起來正確，所有10個項目都顯示出來。

我正在構建一個windows開始屏幕類型的佈局，其中一些圖塊將是單個，其他雙倍寬度。我正在做一些計算來將div包裝在div中。

我已經建立了該過濾器是

 
app.filter('partition', function() { 
    var part = function(arr, size) { 
    if (0 === arr.length) return []; 
    var applist=[]; 
    var partlist=[]; 
    var blocksize=0; 
    console.log(arr); 
    for(var a in arr){ 
     var app = arr[a]; 

     if(app.width=='single'){ 
      console.log(app.name); 
      partlist.push(app); 
      blocksize++; 
     } 
     if(app.width=='double' && blocksize=4){ 
      applist.push(partlist); 
      partlist=[app]; 
      blocksize=2; 
     } 

     if(blocksize==size || a==arr.length-1){ 
       applist.push(partlist); 
       partlist=[]; 
       blocksize=0; 
      } 
    } 
    console.log(applist) 
    return applist; 
    }; 
    return part; 
});

，並

 
<div ng-repeat="block in apps | filter:search | partition:6" class="app-block" > 
    <li ng-repeat="app in block" class="app-tile" ng-class="{double:app.width=='double'}"> 
      <div class="name">{{app.name}}</div> 
    </li> 
</div>

我使用嵌套的重複錯誤的NG-重複的HTML？正如我所說，正在顯示的瓷磚數量是正確的，但錯誤是關於我的事情（這是大的，醜陋的和紅色的）。

來源

2013-08-21 pedalpete

這裏的根本問題是你的partition過濾器返回一個數組數組;每個摘要週期，它返回一個不同的數組數組，即使內部的內部數組都是相同的。

例如，在你的JavaScript控制檯檢查這個表達式：

[[1, 2], [3, 4]] == [[1, 2], [3, 4]] // false

因爲ngRepeat認爲每一次的陣列是不同的，它繼續重新運行消化週期，直到達到最大的10.

如果您有一個Plunker或JSFiddle，它可以提供您問題的更完整的工作畫面，這將有助於演示解決方案;代替這一點，請查看this answer以及該問題的接受答案。

一兩件事你可以做的是操縱數據在控制器和迭代，與其：

app.controller('SomeController', function($scope, $filter) { 
    $scope.apps = [ ... ]; 

    var calculateBlocks = function() { 
    var filteredBlocks = $filter('filter')($scope.search); 
    $scope.appsBlocks = $filter('partition')(filteredBlocks, 6); 
    }; 

    // Every time $scope.apps changes, set $scope.appsBlocks 
    // to the filtered and partitioned version of that data. 
    // In AngularJS 1.4+ you can use $watchCollection: 
    // http://code.angularjs.org/1.1.4/docs/api/ng.$rootScope.Scope#$watchCollection 
    $scope.$watch('apps', calculateBlocks, true); 
    // Same if the search term changes. 
    $scope.$watch('search', calculateBlocks); 
});

然後在你的HTML：

<div ng-repeat="block in appsBlocks" class="app-block" > 
    <li ng-repeat="app in block" class="app-tile" ng-class="{double:app.width=='double'}"> 
    <div class="name">{{app.name}}</div> 
    </li> 
</div>

來源

2013-08-21 06:36:50

angular.js包裝時NG-重複

回答

相關問題