Table 在 table 内使用 ng-show 在 AngularJS

Question

我有一个 table，在其中单击一行后，我想在我单击的行之后显示新的 child table。我在单击行时调用 new api，所以我必须在单击该行后立即在 new table 中显示它。查看快照

点击第一行后，新的 table 显示为 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 我仍然无法显示 table.

Answer 1

首先，您不能像 <tr> 或 <td> 那样插入 <table>。但是您可以在 <td> 标签中插入 table。

试试下面的。

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

Table 在 table 内使用 ng-show 在 AngularJS

Table inside table using ng-show in AngularJS

javascript

angularjs

angular-material