我使用以下过滤器:
angular.module("chunkFilter", []).
filter('chunked', function () {
return function (array, chunkSize) {
if (!(array instanceof Array)) return array;
if (!chunkSize) return array;
// Create empty cache if it doesn't already exist.
if (typeof thisApp.chunkCache === "undefined") {
thisApp.chunkCache = [];
}
// Search the cache to see if we filtered the given array before.
for (var i = 0; i < thisApp.chunkCache.length; i++) {
var cache = thisApp.chunkCache[i];
if (cache.array == array && cache.chunkSize == chunkSize) {
return cache.result;
}
}
// If not, construct the chunked result.
var result = chunkArray(array, chunkSize);
defineHashKeys(result);
// And then add that result to the cache.
var cache = {
array: array,
chunkSize: chunkSize,
result: result
};
thisApp.chunkCache.push(cache);
return result;
};
function chunkArray(array, chunkSize) {
var result = [];
var currentChunk = [];
for (var i = 0; i < array.length; i++) {
currentChunk.push(array[i]);
if (currentChunk.length == chunkSize) {
result.push(currentChunk);
currentChunk = [];
}
}
if (currentChunk.length > 0) {
result.push(currentChunk);
}
return result;
}
function defineHashKeys(array) {
for (var i=0; i<array.length; i++) {
array[i].$$hashKey = i;
console.log(array[i]);
}
}
});
取自StackOverflow上的另一个问题(我不记得哪一个),这个过滤器知道如何将数组块化为部分(用于行显示)。
对于以下情况,它正如预期的那样工作:
<div class="row-fluid" ng-repeat="offers_chunk in offers | chunked:4">
<div style="cursor: pointer" class="span3" ng-repeat="offer in offers_chunk" ng-click="selectedOffer(offer)">
<offer-box></offer-box>
</div>
</div>
使用控制器impl:
getOffers = ->
Offer.query().then (offers) ->
$scope.offers = offers
但不适合
<div ng-controller="UpcomingCampaignBoxesController">
<div class="row-fluid" ng-repeat="upcoming_chunk in upcoming_status_boxes | chunked:4">
<div style="cursor: pointer" class="span3" ng-repeat="campaign in upcoming_chunk">
<status-box></status-box>
</div>
</div>
</div>
和: root =全球?窗口
UpcomingCampaignBoxesController = ($scope, Campaign, $resource) ->
getCampaignStatusBoxes = (st)->
$resource('/campaign/status_boxes', {}).query({status: st})
$scope.upcoming_status_boxes = getCampaignStatusBoxes("new")
root.UpcomingCampaignBoxesController = UpcomingCampaignBoxesController
RunningCampaignBoxesController = ($scope, Campaign, $resource) ->
getCampaignStatusBoxes = (st)->
$resource('/campaign/status_boxes', {}).query({status: st})
$scope.running_status_boxes = getCampaignStatusBoxes("running")
root.RunningCampaignBoxesController = RunningCampaignBoxesController
没有分块它工作正常。那是为什么?