Question

我有一个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指令填充重复的元素？

Answer 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了解更多信息。

Answer 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

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

2 个答案: