離子收集 - 用日期分隔線重複

Question

我收到了包含大約200個文字和圖像的非常大的列表。 ng-repeat是緩慢呈現此流暢的方式。它試用了這個solution。工作很好。但不能收集重複。

我的網絡的服務回報這樣的：

有具體日期的事件。事件應按日期分組。所以爲了使用collection repeat，如何插入分隔符，如果你不能使用angular.filter groupBy？

Answer 1

我可以爲您提供一個部分解決方案，只有在數據集按照分隔區中的顯示字段排序時才能工作。

首先，我們需要在數組中創建一個假元素，以便我們可以區分另一元素中的分隔符。

比方說，我們從web服務獲取職位的集合：

.controller('mainController', function($scope, dataService) { 
    $scope.posts = []; 
    var divider = ''; 
}); 

私有字段分隔會在使用的時候我們加載的職位。

，我們將有loadMore方法加載額外的數據，當我們滾動列表：

$scope.loadMore = function(argument) { 
    page++; 
    dataService.GetPosts(page, pageSize) 
     .then(function(result) { 
     if (result.data.length > 0) { 
      angular.forEach(result.data, function(value, key) { 
       value.divider = false; 
       if (value.postId !== divider) 
       { 
       divider = value.postId; 
       $scope.posts.push({divider: true, dividerText: value.postId}); 
       } 
       $scope.posts.push(value); 
      }); 
     } 
     else { 
      $scope.theEnd = true; 
     } 
    }) 
    .finally(function() { 
     $scope.$broadcast("scroll.infiniteScrollComplete"); 
    }); 
}; 

當我們通過提取來自Web API的數據（並承諾解決），我們可以循環收集並檢查該字段是否與分隔符不同。如果這是一個新的分隔，我們存儲信息，並添加了新的元素添加到集合：

angular.forEach(result.data, function(value, key) { 
    value.divider = false; 
    if (value.postId !== divider) 
    { 
     divider = value.postId; 
     $scope.posts.push({divider: true, dividerText: value.postId}); 
    } 
    $scope.posts.push(value); 
}); 

正如你可以看到我已經添加的元素：

$scope.posts.push({divider: true, dividerText: value.postId}); 

我已經使用了dividerText字段將在稍後顯示。

現在，我們需要創建自己的指令divider-collection-repeat應連接到一個集合重複：

<ion-item collection-repeat="post in posts" item-height="75" divider-collection-repeat> 

我猜你正在使用infinite-scroll，所以這裏是整個HTML：

<ion-content ng-controller="mainController"> 
    <ion-list> 
     <ion-item collection-repeat="post in posts" item-height="75" divider-collection-repeat> 
      {{post.name}} 
    </ion-item> 
    </ion-list> 
    <ion-infinite-scroll ng-if="!theEnd" on-infinite="loadMore()" distance="50%"></ion-infinite-scroll> 
    </ion-content> 

這是指令：

.directive('dividerCollectionRepeat', function($parse) { 

    return { 
     priority: 1001, 
     compile: compile 
    }; 

    function compile (element, attr) { 
     var height = attr.itemHeight || '75'; 
     var itemExpr = attr.collectionRepeat.split(' ').shift(); 
     attr.$set('itemHeight', itemExpr + '.divider ? 40 : (' + height + ')'); 
     attr.$set('ng-class', itemExpr + '.divider ? "item-divider" : ""'); 
     var children = element.children().attr('ng-hide', itemExpr + '.divider'); 
     element.prepend(
     '<div ng-show="' + itemExpr + '.divider" class="my-divider" ' + 
     'ng-bind="' + itemExpr + '.dividerText" style="height:100%;">' + 
     '</div>' 
    ); 

     return function postLink(scope, element, attr) { 
     scope.$watch(itemExpr + '.divider', function(divider) { 
      element.toggleClass('item-divider', !!divider); 
     }); 
     }; 

    } 

}); 

指令準備使用您在collection-repeat中定義的表達式結束元素（html）到列表。

在我的示例我已經使用collection-repeat="post in posts"所以這行：

var itemExpr = attr.collectionRepeat.split(' ').shift(); 

獲取該項目的名稱;在我的情況下，它將是post。

我們還使用height，因爲我們可能需要爲分隔線設置不同的高度。

這裏，該位是所有魔法發生的地方：

element.prepend(
    '<div ng-show="' + itemExpr + '.divider" class="my-divider" ' + 
     'ng-bind="' + itemExpr + '.dividerText" style="height:100%;">' + 
    '</div>' 
); 

它使用領域「post.divider」（ng-show="' + itemExpr + '.divider"）的ng-show並結合我們的文本字段ng-bind="' + itemExpr + '.dividerText"

我我們還添加了一個自定義類my-divider，以防我們需要稍微改變分隔線的佈局。

最終結果是here或在此plunker。

正如你可能已經注意到我沒有使用日期字段，因爲我已經有一個樣本，可悲的是，我沒有任何日期。 我想應該很容易適應你的情況。

該指令基於我在github上找到的樣本。 你會找到指令here的代碼。