【问题标题】:ng-repeat and collapse tableng-repeat 和折叠表
【发布时间】:2017-06-14 20:39:17
【问题描述】:

我正在尝试使用按钮在表格内显示信息,以使用行的 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

【问题讨论】:

    标签: angularjs twitter-bootstrap


    【解决方案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">
    

    【讨论】:

    • 还是一样的结果:(
    • 你有&lt;tr ng-repeat= "ft in ftListesorted" ng-show="expanded" class="collapse {{ft.IdProjet}}"&gt;。在此处删除 ng-show
    • 还是同样的问题:/
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2023-03-04
    • 2016-08-07
    • 1970-01-01
    • 2014-04-15
    • 2016-07-23
    • 2020-06-05
    • 2014-06-30
    相关资源
    最近更新 更多