ng-repeat funktioniert nicht, wenn Eltern CSS eingestellt ist:

Ich habe ein div mit einer Klasse, deren CSS display: none; ist. Auf Knopfdruck ändere ich die Klasse mit einer Klassenumschaltung ng-class="vm.showing ? 'zoomIn' : 'zoomOut'". Das Problem ist, dass angular das ng-repeat-Element nicht zu füllen scheint, wenn der Stil auf display: none; festgelegt ist.ng-repeat funktioniert nicht, wenn Eltern CSS eingestellt ist:

bearbeiten Ich möchte animate.css verwenden, also eigentlich würde der Code ng-class="vm.showing ? 'zoomIn' : 'zoomOut' sein

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

Alter Code - Mißachtung

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

Wie kann ich das richtig machen, damit die ng-repeat-Direktive popu lates das wiederholte Element?

Quelle

2016-05-07 Michael Tranchida

Bitte fügen Geige –

Ihre Frage macht keinen Sinn, es sei denn, ein Teil Ihrer 'zoomIn' oder' zoomOut' Klasse wird mit 'display: none; '. Und wenn das div tatsächlich auf 'display: none;' eingestellt ist, dann wäre es normal und akzeptiert, dass die darin verschachtelte Wiederholung nicht bevölkert ist; Warum würdest du einen Dom, der nicht sichtbar ist, bevölkern? – Claies

@RIYAJKHAN Ich machte einen Plunkr und es funktionierte gut, dann öffnete Dev-Tools auf tatsächlichen Code, ich arbeite an, es war ein Duplikat Fehler in eckigen –

Angular bietet eine ng-show und ng-hide Richtlinien, die Sie anstelle der Anzeige verwendet werden soll: 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 gibt Ihnen eine viel sauberer Syntax es lohnt sich also, dass nur für die Verwendung.

Meine Vermutung ist, dass die traditionelle display: none Methode wegen Leistungsoptimierungen nicht funktioniert. Sie sagen Angular, dass dieser Block nicht gerendert werden muss, weil er versteckt ist. Sie machen es dann sichtbar, aber weil es in CSS passiert, weiß Angular nicht, dass es aktualisiert werden muss.

Quick tutorial für weitere Informationen.

Quelle

2016-05-07 08:56:06

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

Jetzt animate.css Verwenden

Quelle

2016-05-07 11:22:09

ng-repeat funktioniert nicht, wenn Eltern CSS eingestellt ist:

Antwort

Verwandte Themen