3

SO Angular.js ng-repeat に関するこの回答の基本的な考え方に従った後: x 回の反復後に要素を開く/閉じる

項目をグループ化して div でラップすると、次のエラーが発生しますError: 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations:

これにより、Angular は 10 回の繰り返しを想定しており、5 回しか登録していないと思われます。ただし、出力は正しく、10 項目すべてが表示されています。

私は、ウィンドウの開始画面タイプのレイアウトを作成しています。タイルの一部は単一で、他のタイルは幅が 2 倍になります。タイルをdivでラップするためにいくつかの計算を行っています。

私が作ったフィルターは

app.filter('パーティション', function() {
  var part = function(arr, size) {
    if ( 0 === arr.length ) return [];
    var applist=[];
    var partlist=[];
    var ブロックサイズ = 0;
    console.log(arr);
    for(var a in arr){
        var app = arr[a];

        if(app.width=='single'){
            console.log(app.name);
            partlist.push(アプリ);
            ブロックサイズ++;
        }
        if(app.width=='double' && blocksize=4){
            applist.push(パーツリスト);
            partlist=[アプリ];
            ブロックサイズ=2;
        }

        if(blocksize==サイズ || a==arr.length-1){
                applist.push(パーツリスト);
                パーツリスト=[];
                ブロックサイズ=0;
            }
    }
    console.log(アプリリスト)
   アプリリストを返します。
  };
  返品部分;
});

そしてng-repeatsを含むhtmlは

<div ng-repeat="アプリでブロック | フィルター:検索 | パーティション:6" クラス="アプリブロック" >
    <li ng-repeat="app in block" class="app-tile" ng-class="{double:app.width=='double'}">
          <div class="name">{{app.name}}</div>
    </li>
</div>

ネストされた繰り返しを間違って使用していますか? 私が言ったように、表示されているタイルの数は正しいですが、エラーは私の問題です (大きく、醜く、赤です)。

4

1 に答える 1

4

ここでの根本的な問題は、partitionフィルターが配列の配列を返すことです。内部配列内の要素が同じであっても、ダイジェスト サイクルごとに異なる配列の配列を返します。

たとえば、JavaScript コンソールで次の式を確認します。

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

ngRepeatは配列が毎回異なると考えているため、最大数の 10 に達するまでダイジェスト サイクルを再実行し続けます。

問題のより完全な作業図を提供する Plunker または JSFiddle がある場合、それは解決策を示すのに役立ちます。その代わりに、この回答とその質問に対する受け入れられた回答を確認してください。

できることの 1 つは、コントローラー内のデータを操作し、代わりにそれを反復処理することです。

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-21T06:36:50.763 に答える