使用md-virtual-repeat和md-virtual-repeat-container的可折叠组头

Question

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

http://codepen.io/pyella/pen/XpXaEJ

编辑1：我正在尝试这个概念验证来实现无限滚动来渲染固定的dom元素，因为我的列表可能包含非常大的数字（要渲染的10000个DOM元素），这可能会导致性能和CPU问题以及使用角度渲染大量数据的任何人都可以使用角度材料并避免性能问题。

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

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

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

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

Answer 1

我不确定这是否是您想要实现的目标，但这里是编辑过的代码：http://codepen.io/anon/pen/zNBrJg

我添加了

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

之前的position是absolute，这就是为什么它的父母没有调整身高的原因。

我还从height: 100%选择器中删除了.virtualRepeatdemoScrollTo #vertical-container规则。