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

以下是show / hide

的功能

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

vm.detailedShow [$ index]的值在点击时变为true / false我仍然无法显示该表。

Answer 1

首先，您不能像<table>或<tr>一样插入<td>。但您可以将表格插入<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>