当父级的 css 设置为 display: none 时，ng-repeat 不起作用答案

【问题标题】：ng-repeat doesn't work when parent's css is set to display: none当父级的 css 设置为 display: none 时，ng-repeat 不起作用
【发布时间】：2016-05-07 19:22:09
【问题描述】：

我有一个 div，其 css 为 display: none;。单击按钮后，我使用类切换ng-class="vm.showing ? 'zoomIn' : 'zoomOut'" 更改类。问题是当样式设置为 display: none; 时，angular 似乎没有填充 ng-repeat 元素。

编辑我想使用animate.css，所以实际上代码是ng-class="vm.showing ? 'zoomIn' : 'zoomOut'

更新代码：

<button ng-click="vm.showing = true" type="button">View Panel</button>

<div ng-class="vm.showing ? 'zoomIn' : 'zoomOut'">
    <button ng-click="vm.showing = false" type="button">Close Panel</button>
    <div ng-repeat="item in vm.items">
        ...
    </div>
</div>

旧代码 - 忽略

<button ng-click="vm.showing = true" type="button">View Panel</button>

<div ng-class="vm.showing ? '' : 'display-none'">
    <button ng-click="vm.showing = false" type="button">Close Panel</button>
    <div ng-repeat="item in vm.items">
        ...
    </div>
</div>

我怎样才能使它正常工作，以便 ng-repeat 指令填充重复的元素？

【问题讨论】：

您的问题没有意义，除非您的zoomIn 或zoomOut 课程的一部分使用display: none;。如果 div 确实设置为 display: none; 那么它是正常的，并且可以接受嵌套在里面的重复不被填充；为什么要填充不可见的 dom 树？
@RIYAJKHAN 我做了一个 plunkr，它工作正常，然后在我正在处理的实际代码上打开了开发工具，这是一个角度错误

标签： javascript angularjs

【解决方案1】：

Angular 提供了一个 ng-show 和 ng-hide 指令，你应该使用它们来代替 display: none:

<div ng-show="vm.showing">
<button ng-click="vm.showing = false" type="button">Close Panel</button>
<div ng-repeat="item in vm.items">
    ...
</div>

Ng-show 为您提供了更简洁的语法，因此值得为此使用。

我的猜测是，由于性能优化，传统的 display: none 方法不起作用。你告诉 Angular 没有必要渲染那个块，因为它是隐藏的。然后你让它可见，但是因为它发生在 CSS Angular 中不知道它需要更新。

Quick tutorial 了解更多信息。

【讨论】：

【解决方案2】：

<button ng-click="vm.showing = true" type="button">View Panel</button>

<div ng-show="vm.showing">
    <button ng-click="vm.showing = false" type="button">Close Panel</button>
    <div ng-repeat="item in vm.items">
        ...
    </div>
</div>

现在使用 animate.css

【讨论】：