角度分组滤镜

Question

在ng-repeat中的angular.js条件标记之后，我尝试编写一个自定义过滤器进行分组。我遇到了有关对象标识和正在监视更改的模型的问题，但我想我终于确定了问题，因为控制台中不再弹出任何错误。

原来我错了，因为现在当我尝试将其与其他过滤器（用于分页）结合时，就像这样

<div ng-repeat="r in blueprints | orderBy:sortPty | startFrom:currentPage*pageSize | limitTo:pageSize | group:3">
      <div ng-repeat="b in r">

我得到了可怕的“达到10个$ digest（）迭代。正在中止！” 再次出现错误消息。

这是我的组过滤器：

filter('group', function() {
  return function(input, size) {
    if (input.grouped === true) {
      return input;
    }
  var result=[];
  var temp = [];
  for (var i = 0 ; i < input.length ; i++) {
      temp.push(input[i]);
      if (i % size === 2) {
          result.push(temp);
          temp = [];
      }
  }
  if (temp.length > 0) {
      result.push(temp);
  }
  angular.copy(result, input);
  input.grouped = true;
  return input;
}; 
}).

注意输入angular.copy上.grouped标记的使用和标记，但没有用：(我知道 例如 “ 10 $
digest（）迭代达到了。异常终止！”由于使用angularjs进行了过滤，但显然我没有得到它。

而且，我认为分组逻辑有点天真，但这是另一回事了。任何帮助将不胜感激，因为这使我发疯。

Answer 1

看起来这里的真正问题是您要更改输入，而不是创建新变量并从过滤器输出该变量。这将在监视您输入的变量的任何内容上触发监视。

确实没有理由在其中添加“ grouped==true”检查，因为您应该完全控制自己的过滤器。但是，如果这对于您的应用程序来说是必须的，那么您希望将“
grouped == true”添加到过滤器的结果中，而不是输入中。

过滤器的工作方式是更改输入并返回不同的内容，然后下一个过滤器处理先前的过滤器结果…因此，您的“已过滤”检查基本上是不相关的item in items | filter1 | filter2 |filter3，其中filter1过滤项目，filter2过滤filter1的结果，以及filter3过滤过滤器2的结果…

这是我刚刚讲过的。我不确定（目前）是否可行，但是它为您提供了基本思路。您将在一侧取一个数组，然后在另一侧吐出一个数组。

app.filter('group', function(){
   return function(items, groupSize) {
      var groups = [],
         inner;
      for(var i = 0; i < items.length; i++) {
         if(i % groupSize === 0) {
            inner = [];
            groups.push(inner);
         }
         inner.push(items[i]);
      }
      return groups;
   };
});

HTML

<ul ng-repeat="grouping in items | group:3">
    <li ng-repeat="item in grouping">{{item}}</li>
</ul>

编辑

也许最好在代码中看到所有这些过滤器，但是由于不断需要在$ digest上重新对其进行评估，因此似乎引起了问题。所以我建议你做这样的事情：

app.controller('MyCtrl', function($scope, $filter) {
   $scope.blueprints = [ /* your data */ ];
   $scope.currentPage = 0;
   $scope.pageSize = 30;
   $scope.groupSize = 3;
   $scope.sortPty = 'stuff';

   //load our filters
   var orderBy = $filter('orderBy'),
       startFrom = $filter('startFrom'),
       limitTo = $filter('limitTo'),
       group = $filter('group'); //from the filter above

   //a method to apply the filters.
   function updateBlueprintDisplay(blueprints) {
        var result = orderBy(blueprints, $scope.sortPty);
        result = startForm(result, $scope.currentPage * $scope.pageSize);
        result = limitTo(result, $scope.pageSize);
        result = group(result, 3);
        $scope.blueprintDisplay = result;
   }

   //apply them to the initial value.
   updateBlueprintDisplay();

   //watch for changes.
   $scope.$watch('blueprints', updateBlueprintDisplay);
});

然后在您的标记中：

<ul ng-repeat="grouping in blueprintDisplay">
   <li ng-repeat="item in grouping">{{item}}</li>
</ul>

…我肯定那里有错别字，但这是基本思想。

再次编辑： 我知道您已经接受了这个答案，但是还有另一种方法可以做到这一点，我最近了解到您可能会更好：

<div ng-repeat="item in groupedItems = (items | group:3 | filter1 | filter2)">
    <div ng-repeat="subitem in items.subitems">
    {{subitem}}
    </div>
</div>

这将在您的$ scope上动态创建一个名为$scope.groupedItems的新属性，该属性应有效地缓存您筛选后的结果和分组结果。

旋转一下，让我知道是否适合您。如果没有，我想其他答案可能会更好。