ng-if、md-virtual-repeat 高度计算的问题答案

【问题标题】：Issue with ng-if, md-virtual-repeat height calculationng-if、md-virtual-repeat 高度计算的问题
【发布时间】：2016-11-15 12:28:07
【问题描述】：

将 ng-if 与 md-virtual-repeat 一起使用似乎会破坏 md-virtual-repeat 的高度计算。 md-virtual-repeat 似乎与 ng-show 一起使用，但是，我在网格图块内使用 md-virtual-repeat 作为网格列表的一部分； ng-show 隐藏网格图块，但图块仍然占据相同的空间，就好像它没有被隐藏一样。关于解决方法的任何想法？

编辑：抱歉解释不佳，我脑子里更清楚了。请看codepen：http://codepen.io/sweatherly/pen/rLYPvE

ng-if="$mdMedia('md')"

问题似乎出在 md-tabs 上。如果将屏幕大小减小到中等并刷新，则 md-list 将显示在每个选项卡中。但是，如果您从 lg 屏幕开始并减少到 md 而不刷新，则不会显示行。我添加了一个带有 ng-show 而不是 ng-if 的网格图块，以演示网格图块在隐藏而不是从 DOM 中删除时如何仍然占据相同的空间。

嵌套在网格图块下的一些元素的高度设置为 100%，但是，发生此问题时，其中许多元素的高度为 0px。似乎在准确设置父母的高度之前正在计算高度。我猜想在父级上设置一个固定高度可能会解决这个问题，但是，一个固定高度并不适合所有屏幕尺寸。

【问题讨论】：

Sweatherly，请分享您的代码以便轻松调试
请分享更多细节。
@NagaSaiA 很抱歉解释不佳！我添加了一个 codepen 来帮助解释我的问题。
@Aravind 对不起！添加了更多细节。

标签： css angularjs angular-material

【解决方案1】：

我在 CSS 中定位了错误的元素。我通过以每个 md-tab 的 id 为目标来设置高度（例如，#tab-content-0、#tab-content-1 等）。 Ng-if 删除并创建了更多 md-tabs，因此新选项卡具有新的不同 ID（例如 #tab-content-2、#tab-content-3 等）。
我找到的解决方案是撒网并使用元素而不是 id：

md-tab-content .md-virtual-repeat-container {
  height:calc(100% + 48px);
}
md-tab-content > div {
  height: calc(100%);
}

新的密码笔：http://codepen.io/sweatherly/pen/pbpKZO

【讨论】：

这对我有用，垂直使用虚拟重复。