离子收集 - 用日期分隔线重复

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的代码。