当parent的css设置为display：none时，ng-repeat不起作用

I have a div with a class the css of which is display: none;. Upon a button click I change the class with a class toggle ng-class="vm.showing ? 'zoomIn' : 'zoomOut'". The problem is that angular doesn't seem to populate the ng-repeat element when the style is set to display: none;.

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

Edit I want to use animate.css, so actually the code would be ng-class="vm.showing ? 'zoomIn' : 'zoomOut'

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

Updated code:

<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>

Old code - disregard

旧代码 - 无视

<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>

How can I make this work properly so that the ng-repeat directive populates the repeated element?

如何使这个工作正常,以便ng-repeat指令填充重复的元素?

2 个解决方案

#1

Angular provides a ng-show and ng-hide directives that you should use instead of display: none:

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 gives you a much cleaner syntax so it's worth using just for that.

Ng-show为您提供了更清晰的语法,因此值得使用它。

My guess is that the traditional display: none method doesn't work because of performance optimisations. You're telling Angular that there's no need to render that block because it's hidden. You then make it visible, but because it's happening in CSS Angular doesn't know that it needs to update.

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

Quick tutorial for more info.

快速教程了解更多信息。

#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>

Now Use animate.css

现在使用animate.css

#1