anglejs – 角分组滤波器

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

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;
}; 
}).

看起来这里真正的问题是您正在改变输入,而不是创建一个新的变量并从过滤器输出.这将触发观看您输入的变量的任何内容.

真的没有理由在那里添加“grouping == true”检查,因为您应该完全控制自己的过滤器.但是,如果这是您的应用程序必须的,那么您需要将“grouping == true”添加到过滤器的结果,而不是输入.

过滤器的工作方式是改变输入并返回不同的东西,然后下一个过滤器处理以前的过滤器结果…所以您的“过滤”检查将主要是项目中的不相关项| 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.groupedItems的新属性,这应该有效地缓存过滤和分组的结果.

给它一个旋转,让我知道,如果它适用于你.如果没有,我猜其他答案可能会更好.