Angular js chunked过滤器

时间:2013-12-18 14:15:08

标签: angularjs

我使用以下过滤器:

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

没有分块它工作正常。那是为什么?

0 个答案:

没有答案