【问题标题】：Group items by month and display them in a two nested lists in Angular.js按月对项目进行分组，并将它们显示在 Angular.js 中的两个嵌套列表中
【发布时间】：2015-08-30 23:01:07
【问题描述】：

我有一个物品清单。每个项目都包含一个date 属性。我想按月份对所有项目进行分组并将它们显示在两个嵌套列表中。

示例

2015 年 6 月
- 项目 1
- 第 2 项
- 项目 3
2015 年 5 月
- 第 4 项
- 第 5 项
- 第 6 项

等等

是否有可能在 Angular.js 中实现这一点而无需摆弄底层数据（即通过过滤器等）？

我已经尝试过本主题中描述的方法： How can I group data with an Angular filter?，但它破坏了元素的顺序，我必须在调用 groupBy 之前手动将日期格式化为 'MMMM YYYY'。

【问题讨论】：

您的日期属性可能是字符串格式。首先将其转换为日期。为避免重复，请参阅solution。希望对您有所帮助。
感谢@arman1991 的回复。我的日期最初是一个 moment() 实例。如果不先添加另一个属性来保存'MMMM YYYY' 的文本表示，我就找不到按月和年对项目进行分组的方法。有没有办法直接将groupby 与 moment() 或 Date 实例一起使用？
也许这个topic可以帮到你，moment.js也有提到。我找到了一种按我之前评论中描述的日期分组的方法，但由于某种奇怪的原因，过滤不能以您想要的格式工作......如果我发现一种不添加新属性的方法，您将被告知： )
还有一个问题是结合日期参数分组排序...
感谢@arman1991 抽出时间来研究这个问题。我决定现在重新构建控制器内部的数据以使用更简单的渲染功能。

标签： javascript angularjs group-by angularjs-ng-repeat

【解决方案1】：

看起来很简单，只需按日期对项目进行分组并显示：

var itemsGroupedByMonth = function (items) {
    var
        groups = [[], [], [], [], [], [], [], [], [], [], [], [],],
        itemGroupedByMonths = [];

    for (var i = 0; i < items.length; i++) {
      groups[items[i].date.getMonth()].push(items[i]);
    }
    for (var i = 0; i < groups.length; i++) {
      if (groups[i].length) {
        itemGroupedByMonths.push({
          month: monthLabels[i],
          items: groups[i]
        });

      }
    }
    return itemGroupedByMonths;
  };

在这里找到一个工作示例：http://plnkr.co/edit/idvloFKoFvWGdBSGfMsX?p=preview

【讨论】：

如何用 Angular 2 做到这一点？
解决方案基于纯JS，即不使用任何角度组件。您需要在 TypeScript 中重写相同的逻辑。