Question

我正在尝试使用按钮在表格中显示信息，以使用行的id显示和隐藏每行中的数据，但由于我有2 ng-repeat，因此第一个循环在第二个循环之前完成，因此所有数据显示在同一行：这是我的代码：

 <div class="table-responsive">
   <table class="table table-bordered table-hover table-striped">
    <thead>
     <tr>
     <th></th>
     <th>Projet</th>
     <th>Responsable Apitech</th>
     <th>Temps Passé</th>
     </tr>
    </thead>
    <tbody>
     <tr ng-repeat-start="p in projetsListe" >
       <td>
       <button class="btn btn-xs" ng-click="expanded = !expanded" expand data-toggle="collapse" id="{{p.IdProjet}}" data-target=".{{p.IdProjet}}">
       <span ng-bind="expanded ? '-' : '+'"></span>
       </button>
       </td>
       <td>{{p.NomProjet}}</td>
       <td>{{p.ResponsableApitech}}</td>
       <td>Temps Passé</td>
      </tr>
      <tr ng-repeat-end ng-show="expanded">
         <td></td>
         <td colspan="6">
         <table class="table table-condensed table-bordered">
            <thead>
             <th></th>
             <th>Tache</th>
             <th>Collaborateur</th>
             <th>Date</th>
             <th>Temps Passé</th>
            </thead>
            <tbody>
             <tr ng-repeat= "ft in ftListesorted" ng-show="expanded" class="collapse {{ft.IdProjet}}">
             <td><i class="glyphicon glyphicon-plus"></i></td>
             <td>{{ft.NomTache}}</td>
             <td>{{ft.NomCollaborateur}}</td>
             <td>{{ft.Datefeuillestemps |  date : 'dd/MM/yyyy' }}</td>
             <td>{{ft.TempsPasse}}</td>       
             </tr>
           </tbody>
        </table>
        </td>
   </tr>
 </tbody>
</table>

这就是我想要实现的目标：http://embed.plnkr.co/qqNGSbw6oLUZbKqVQVpG/?show=preview

就我而言：

这就是我得到的：

如果您在第二张图片中发现了第一行和第二行的信息，而我希望每行的信息是分开的。

以下是一个问题示例：https://plnkr.co/edit/pPcPipLK0TltnOC60SSf

Answer 1

为每一行创建expanded属性。改变这一行

 <button class="btn btn-xs" ng-click="p.expanded = !p.expanded" expand data-
  toggle="collapse" id="{{p.IdProjet}}" data-target=".{{p.IdProjet}}">

和

  <tr ng-repeat-end ng-show="p.expanded">

ng-repeat和collapse table

1 个答案: