自动更改折叠数据目标和ID

时间:2017-06-02 08:30:10

标签: angularjs twitter-bootstrap

在ng-repeat内部我有一个表格,我在其中使用Bootstap崩溃显示信息,但是我需要使用循环更改id以便数据显示在正确的位置,使用我当前的代码每次点击都会在同一行显示,这是我的代码:

 <tr ng-repeat=" p in projetsListe ">
       <td>{{p.NomProjet}}</td>
       <td>{{calcul(p.IdProjet)}}</td>
       <td>{{calculTotal(p.IdProjet)}}</td>
       <td>{{calcul(p.IdProjet)-calculTotal(p.IdProjet)}}</td>
       <td>
         <a href="#" ng-click="myFunction(p.IdProjet)" data-toggle="collapse" data-target="#d">
            <i class="fa fa-eye"></i>
            <span>Voir les détails</span> <i class="fa fa-fw fa-caret-down"></i></a>
            <ul id="d" class="collapse"> 
              <table id= "mytable" class="table table-hover" style="display : none;">
                <thead>
                <tr>
                <th>Tache</th>
                <th><center>Charge estimée</center></th>
                <tr ng-repeat="t in tempnorep">
                <td>{{t.NomTache}}</td>
                <td><center>{{t.TempsPrevu}} jours<center></td>
                </tr> 
              </table>
            </ul>
        </td>
</tr>  

1 个答案:

答案 0 :(得分:2)

我相信你想做的事情如下:

<tr ng-repeat=" p in projetsListe ">
       <td>{{p.NomProjet}}</td>
       <td>{{calcul(p.IdProjet)}}</td>
       <td>{{calculTotal(p.IdProjet)}}</td>
       <td>{{calcul(p.IdProjet)-calculTotal(p.IdProjet)}}</td>
       <td>
         <a href="#" ng-click="myFunction(p.IdProjet)" data-toggle="collapse" ng-attr-data-target="#{{p.IdProjet}}">
            <i class="fa fa-eye"></i>
            <span>Voir les détails</span> <i class="fa fa-fw fa-caret-down"></i></a>
            <ul ng-attr-id="{{p.IdProjet}}" class="collapse"> 
              <table id= "mytable" class="table table-hover" style="display : none;">
                <thead>
                <tr>
                <th>Tache</th>
                <th><center>Charge estimée</center></th>
                <tr ng-repeat="t in tempnorep">
                <td>{{t.NomTache}}</td>
                <td><center>{{t.TempsPrevu}} jours<center></td>
                </tr> 
              </table>
            </ul>
        </td>
</tr>