angularjs - angular.js 在包装 ng-repeat 时尝试多次迭代

Question

在 SO Angular.js ng-repeat: opening/closing elements after x iterations 上遵循此答案的基本思想之后

我将项目分组并将它们包装在一个 div 中，并收到以下错误 Error: 10 $digest() iterations reached。中止! 观察者在最后 5 次迭代中解雇:

这让我相信 Angular 期望重复 10 次，而只注册了 5 次。但是，输出看起来是正确的，显示了所有 10 项。

我正在构建一个 Windows 开始屏幕类型的布局，其中一些磁贴将是单一的，其他的是双倍宽度。我正在做一些计算以将图 block 包装在一个 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;
});

带有 ng-repeats 的 html 是

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

我使用嵌套重复是不是错了？正如我所说，显示的图 block 数量是正确的，但错误是我所关心的(它又大又丑又红)。

Answer 1

这里的根本问题是您的 partition 过滤器返回一个数组；每个摘要循环，它都会返回一个不同数组数组，即使内部数组内的元素是相同的。

例如，在您的 JavaScript 控制台中检查这个表达式:

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

因为 ngRepeat 认为数组每次都不同，所以它会继续重新运行摘要循环，直到达到最大值 10。

如果您有一个 Plunker 或 JSFiddle 可以提供更完整、更有效的问题图，这将有助于演示解决方案；取而代之的是，查看this answer以及该问题的公认答案。

您可以做的一件事是操纵 Controller 中的数据并对其进行迭代:

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>