Angularjs 离子收集重复与日期分割

我得到了一个非常大的列表，里面有大约200个文本和图片

ng repeat

是一种减缓渲染速度的方法。它用这个试过了。很好用。但不能重复收集

我的web服务返回以下内容：

---

有些活动有特定的日期。事件应按日期分组。因此，为了使用集合重复，如果不能使用angular.filter groupBy，如何插入分割器？

我可以为您提供一个局部解决方案，该解决方案仅在数据集按分割器中显示的字段排序时才起作用

首先，我们需要在数组中创建一个伪元素，这样我们就可以在其他元素中区分除法器

假设我们有一组从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

，该指令应附加到集合repeat：

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

这是指令：

.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);
         });
      };  

    }

});

获取项目的名称；在我的例子中，它将是

post

我们也使用

高度

，因为我们可能需要为分隔器设置不同的高度

这一点是所有魔法发生的地方：

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

element.prepend(
'' +
''
);

它使用一个

ng show

作为字段“post.divider”（

ng show=“”+itemExpr+”.divider“

）并绑定我们的文本字段

ng bind=“”+itemExpr+”.dividerText“

我还添加了一个自定义类

my divider

，以防我们需要稍微更改一下divider的布局

最终的结果是或在这方面

正如您可能已经注意到的，我没有使用日期字段，因为我已经有了一个样本，遗憾的是，我没有任何日期。 我想适应你的情况应该很容易

该指令基于我在上找到的一个示例。

---

您将找到该指令的代码。

嘿，lefty，感谢您提供了这个很好的示例。我明天会试试这个并给你反馈。目前我没有使用无限卷轴。需要考虑如何用我的php Web服务实现这一点。但返回的事件使用SQL按日期排序。所以我认为你的解决方案应该有效。谢谢大家!@不用担心。你不必使用无限卷轴。这是另一个没有无限卷轴的。希望能有帮助。干杯，太棒了！呈现完美。我唯一无法解决的问题是：如果我开始滚动，就会出现“超过最大调用堆栈大小”错误。猜到了吗？一定是指令的smth。如果我不包括它，就没有调用堆栈errorsAh，太好了。我试图找出问题的原因：-）很高兴我帮了忙。干杯

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

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