Tabelle innerhalb der Tabelle mit ng-show in AngularJS

Question

Ich habe eine Tabelle, in der nach dem Klicken auf eine Zeile, die ich neue Kind-Tabelle anzeigen möchte direkt nach der Zeile, die ich geklickt habe. Ich rufe einen neuen API-Klick auf, so dass ich ihn in einer neuen Tabelle anzeigen muss, unmittelbar nachdem die Zeile geklickt hat. siehe den Snapshot

Nach einem Klick auf die erste Zeile der neuen Tabelle zeigt wie 1, ABC_1, DEF Hier ist der Code für die Vorlage

<table md-table class="md-primary md-data-table"> 
    <thead md-head md-order="vm.query.order"> 
    <tr md-row> 
     <th md-column><span>S. No.</span></th> 
     <th md-column><span>Project Name</span></th> 
     <th md-column><span>Deadline</span></th> 
    </tr> 
    </thead> 
    <tbody md-body> 
    <tr md-row ng-click="vm.ShowDetailed($index)" ng-repeat="project in vm.projects | limitTo : vm.query.limit : (vm.query.page-1)*vm.query.limit"> 
     <td md-cell>{{($index+1)+(vm.query.page-1)*vm.query.limit}}</td> 
     <td md-cell>{{project.fields.project_name}}</td> 
     <td md-cell>{{project.fields.end_date}}</td> 
     <table md-table ng-show="vm.detailedShow[$index]"> 
     <thead md-head> 
      <tr md-row> 
      <th md-column><span>Project Name</span></th> 
      <th md-column><span>District</span></th> 
      <th md-column><span>City</span></th> 
      </tr> 
     </thead> 
     <tbody md-body> 
      <tr md-row ng-repeat="site in sites"> 
       <td md-cell>{{site.projectName}}</td> 
       <td md-cell>{{site.district}}</td> 
       <td md-cell>{{site.city}}</td> 
      </tr> 
     </tbody md-body> 
     </table> 
    </tr> 
    </tbody> 
</table> 

Hier sind die Funktionen für ein-/ausblenden

vm.detailedShow = []; 
vm.ShowDetailed = function(index){ 
    vm.detailedShow[index] = !vm.detailedShow[index]; 
} 

Der Wert von vm.detailedShow [$ index] wird immer wahr/falsch beim Klicken Ich kann die Tabelle nicht anzeigen.

Answer 1

Die erste Sache ist, dass Sie <table> nicht genau wie <tr> oder <td> einfügen können. Aber Sie können die Tabelle in ein <td> Tag einfügen.

Versuchen Sie den folgenden.

<table md-table class="md-primary md-data-table"> 
    <thead md-head md-order="vm.query.order"> 
    <tr md-row> 
     <th md-column><span>S. No.</span></th> 
     <th md-column><span>Project Name</span></th> 
     <th md-column><span>Deadline</span></th> 
    </tr> 
    </thead> 
    <tbody md-body> 
    <tr md-row ng-click="vm.ShowDetailed($index)" ng-repeat-start="project in vm.projects | limitTo : vm.query.limit : (vm.query.page-1)*vm.query.limit"> 
     <td md-cell>{{($index+1)+(vm.query.page-1)*vm.query.limit}}</td> 
     <td md-cell>{{project.fields.project_name}}</td> 
     <td md-cell>{{project.fields.end_date}}</td> 
    </tr> 
    <tr ng-show="vm.detailedShow[$index]" ng-repeat-end> 
     <td> </td> 
     <td colspan="2"> 
      <table md-table ng-show="vm.detailedShow[$index]"> 
     <thead md-head> 
      <tr md-row> 
      <th md-column><span>Project Name</span></th> 
      <th md-column><span>District</span></th> 
      <th md-column><span>City</span></th> 
      </tr> 
     </thead> 
     <tbody md-body> 
      <tr md-row ng-repeat="site in sites"> 
       <td md-cell>{{site.projectName}}</td> 
       <td md-cell>{{site.district}}</td> 
       <td md-cell>{{site.city}}</td> 
      </tr> 
     </tbody md-body> 
     </table> 
     </td> 
    </tr> 
    </tbody> 
</table>