Angularjs 使用md virtual repeat和md virtual repeat容器的可折叠组标头

我正在尝试使用md virtual repeat实现显示可折叠分组作为概念证明，我在基于内部内容设置高度时遇到了问题，就像使用virtual repeat项目一样。我创建了codepen示例来说明这个问题。任何基于CSS或angularJs的解决方案都将受到极大的赞赏

编辑1:我正在尝试这个概念验证，以实现无限滚动来呈现固定的dom元素，因为我的列表可能包含非常大的数量（要呈现10000个dom元素）这可能会导致性能和CPU问题，通过这一概念验证，任何使用angular渲染巨大数据的人都可以使用angular材质，避免性能问题

注意：请单击显示的年份之一以显示月份包装容器。当前高度硬编码为250px，100%高度不显示包装容器

如果月份包装高度未注释，则不会显示月份包装

.virtualRepeatdemoScrollTo #months-wrapper {
 /* height: 100%;*/
  /*position: initial;*/
}

.virtualRepeatdemoScrollTo .md-virtual-repeat-container {
  height: 250px;
}

---

我不确定这是否是您想要实现的，但下面是编辑的codepen：

我补充说

.md-virtual-repeat-scroller{
  position: initial !important;
}

它以前的

位置

是

绝对位置

，这就是它的父母没有调整高度的原因

---

我还删除了

垂直容器选择器中的
高度：100%
规则。
感谢patryK lucka的回复，我正在尝试使用过去二十年的分组实现可折叠的标题，每个分组都有一组要显示的月份。我正试图证明这一概念，因为虚拟重复只会呈现固定的DOM元素（因为我的列表很大，所以会导致性能问题）。在您编辑的代码笔中，我们不会看到超过5年。我已经更新了我的代码笔示例，其中显示了所有年份，但现在单击“年份”标题不会显示下面的月份。希望从我的codpen示例中实现可折叠的分组标题。