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 个项目。

我正在构建一个 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 是

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

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

4

1 回答 1

4

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

例如，在您的 JavaScript 控制台中检查此表达式：

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

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

如果您有一个 Plunker 或 JSFiddle 可以为您的问题提供更完整的工作图，这将有助于展示解决方案；取而代之的是，请查看此答案以及该问题的已接受答案。

您可以做的一件事是操作控制器中的数据并对其进行迭代：

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