原来我错了,因为现在当我尝试将其与其他过滤器(分页)结合使用时
<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() iterations reached. Aborting!” due to filter using angularjs但显然我没有得到它.
此外,我猜分组逻辑有点天真,但这是另一个故事.任何帮助将不胜感激,因为这让我疯狂.
真的没有理由在那里添加“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的新属性,这应该有效地缓存过滤和分组的结果.
给它一个旋转,让我知道,如果它适用于你.如果没有,我猜其他答案可能会更好.
