AngularJSのng-showを使用したテーブル内テーブル

Question

私はクリックした行のすぐ後に、クリックした行の直後に新しい子テーブルを表示するテーブルがあります。行のクリックで新しいAPIを呼び出すので、行をクリックした直後に新しい表に表示する必要があります。新しい表1のように表示されている最初の行をクリックした後、スナップショット

を参照して、ABC_1は、DEF ここ隠す/テンプレートここ

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

ためのコードは、ショーのための機能である

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

クリックするとvm.detailedShow [$ index]の値がtrue/falseになっていますが、まだテーブルを表示できません。

Answer 1

最初に、<tr>または<td>のように<table>を挿入することはできません。しかし、テーブルを<td>タグの中に挿入することができます。

以下を試してください。

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