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

Question

将 ng-if 与 md-virtual-repeat 一起使用似乎会破坏 md-virtual-repeat 的身高计算。 md-virtual-repeat 似乎可以与 ng-show 一起使用，但是，我在 grid-tile 中使用 md-virtual-repeat 作为 grid-list 的一部分； ng-show 隐藏了 grid-tile 但该图块仍然占据相同的 space，就好像它没有被隐藏一样。关于解决方法的任何想法？

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

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

问题似乎与 md-tabs 有关。如果将屏幕尺寸减小到中等并刷新，md-list 会显示在每个选项卡中。但是，如果您从 lg 屏幕开始并在不刷新的情况下减少到 md，则不会显示行。我添加了一个 grid-tile 和 ng-show 而不是 ng-if 来演示 grid-tile 在隐藏而不是从 [= 中删除时如何仍然占据相同的 space 39=].

嵌套在 grid-tile 下的一些元素的高度设置为 100%，但是，当出现此问题时，其中许多元素的高度为 0px。似乎在 parent 的高度被准确设置之前正在计算高度。我猜测在 parent 上设置一个固定高度可能会解决这个问题，但是，一个固定高度并不适合所有屏幕尺寸。

Answer 1

我在 CSS 中定位了错误的元素。我通过它的 id 定位每个 md-tab 来设置高度（例如#tab-content-0、#tab-content-1 等）。 Ng-if 删除并创建了更多 md-tab，因此新标签具有新的、不同的 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

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

Issue with ng-if, md-virtual-repeat height calculation

css

angularjs

angular-material