親のCSSが表示するように設定されている場合、ng-repeatは機能しません：なし

Question

私は、CSSがdisplay: none;のクラスのdivを持っています。ボタンをクリックすると、クラスを持つクラスがng-class="vm.showing ? 'zoomIn' : 'zoomOut'"のトグルに変更されます。問題は、スタイルがdisplay: none;に設定されているときに、angleがng-repeat要素を設定していないように見えることです。

編集私は実際にコードがng-class="vm.showing ? 'zoomIn' : 'zoomOut'

更新されたコードとなり、animate.cssを使用したい：

<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指令popu繰り返される要素は？

Answer 1

角度を使用すると、表示の代わりに使用する必要がありますng-showとng-hideディレクティブを提供します：なし：それはそのためだけに使用して価値があるので

<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-ショーはあなたに多くのクリーンな構文を提供します。

私の推測では、従来の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