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

Question

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

我正在对项目进行分组并将它们包装在一个 div 中，并收到以下错误 Error: 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations:

这让我相信 Angular 预计有 10 次重复，并且只注册了 5 次。但是，输出看起来正确，显示了所有 10 个项目。

我正在构建一个 windows 开始屏幕类型的布局，其中一些图块将是单宽的，而另一些则是双宽的。我正在做一些计算以将瓷砖包装在一个 div 中。

我构建的过滤器是

app.filter('分区', function() { var 部分 = 函数（arr，大小）{ if ( 0 === arr.length ) 返回 []; 变种应用列表=[]； var partlist=[]; 变量块大小=0； 控制台.log(arr); for(var a in arr){ var app = arr[a]; if(app.width=='single'){ 控制台.log(app.name); partlist.push(app); 块大小++； } if(app.width=='double' && blocksize=4){ applist.push(partlist); 零件清单=[应用程序]； 块大小=2； } if(blocksize==size || a==arr.length-1){ applist.push(partlist); 零件清单=[]; 块大小=0； } } 控制台日志（应用程序列表） 返回应用程序列表； }; 返回部分； });

带有 ng-repeats 的 html 是

{{app.name}}

我使用嵌套重复错误吗？正如我所说，显示的瓷砖数量是正确的，但错误是我所关心的（它很大，丑陋和红色）。

Answer 1

这里的根本问题是您的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>