AngularJS: hinzufügen/zerstören Detail Tabelle Zeile

Question

Ich habe eine Angular 1.4.12 App, mit einer Tabelle erstellt mit verschachtelten ng-repeat zeigt eine Reihe von Daten.

<tr ng-repeat-start="item in pmt.table.data"> 
    ...main data... 
</tr> 
<tr class="table-details" ng-repeat-end="item in pmt.table.data"> 
    <td colspan="15"> 
     <div uib-collapse="!item.showDetails"> 
     <div class="table-details-content">hello world</div> 
     </div> 
    </td> 
</tr> 

Jede Zeile hat ein Offenlegungssymbol, um eine zusätzliche Zeile anzuzeigen, die Details enthält.

In der Vergangenheit haben wir alle Daten geladen und die "collapse" -Direktive von Angular UI Bootstrap verwendet, um die Detailzeilen auszublenden und anzuzeigen.

Sie können die ganze Sache in diesem Pen sehen: https://codepen.io/smlombardi/pen/kXpqPJ?editors=1010

Das Problem bei diesem Ansatz hat sich gezeigt, wenn das Re-Cord viele Daten hat; wie etwa 1000 Reihen von json-Daten. Trotz der Verwendung der Einwegbindung ist die Leistung zu langsam.

Was würde ich lieber tun ist, um nicht haben die Detailzeilen überhaupt enthalten ist, und dann, wenn die Offenlegung Symbol geklickt wird, die Reihe auf den fly erstellen und die Daten abrufen auf der Grundlage der übergeordnete Zeile ID . Wenn das Offenlegungssymbol geschlossen ist, zerstöre die Detailzeile.

Ich habe Dinge wie diese mit jQuery gemacht, aber ich bin ein bisschen verloren auf wie mit Angular nähern.

Answer 1

Verwenden Sie ng-if.

Die ngIf-Anweisung entfernt oder erstellt einen Teil des DOM-Baums basierend auf einem {Ausdruck} neu. Wenn der für ngIf zugewiesene Ausdruck zu einem falschen Wert ausgewertet wird, wird das Element aus dem DOM entfernt, andernfalls wird ein Klon des Elements wieder in das DOM eingefügt.

Beachten Sie, dass ng-if völlig schafft (und zerstört) einen neuen Bereich - das ist, was Sie wollen, aber Sie würden zusätzliche Aufmerksamkeit auf Ihre Umfang Erbe zahlen möchten, sollten Sie die Datenbindung wieder benötigen.

 <td colspan="15"> 
     <!--Change uib-collapse to ng-if--> 
     <div ng-if="item.showDetails"> 
      <div class="table-details-content">hello world</div> 
     </div> 
     </td> 

Arbeiten Codepen