我有项目列表，在每个项目中有许多任务，我的想法是使用折叠面板，其中标题是项目名称，内容是任务信息，这是我面临的唯一问题是元素的 id 所以最后，结果混合了这里是我的代码：
<div ng-repeat= "projet in projetsactifs track by $index" >
<div class="panel-group" id="accordion{{$index}}">
<div class="panel panel-info">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#{{$index}}l" ng-click="tasks(projet.IdProjet)" data-toggle="collapse" data-parent="#accordion{{$index}}" >
{{projet.NomProjet}}</a>
</h4>
</div>
<div id="{{$index}}l" class="panel-collapse collapse in">
<div class="panel-body">
<div class="table-responsive">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Task</th>
<th>Date</th>
<th>price (€/day)</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="tache in tachelistes | orderBy: 'NomTache'">
<td>{{tache.NomTache}}</td>
<td>{{tache.Delai | date : 'dd/MM/yyyy'}}</td>
<td>{{tache.CoutParJour}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
控制器 ：
$scope.tasks=function(id){
Tache.getTachbyProjectID(id).then(function(response){
$scope.tachelistes=response.data.tachelistes;
});
}
这是一个plunker：https ://plnkr.co/edit/JMJU3YfPJkQwBfDyS6E0 ? p = preview
对于您的第一个问题（您需要过滤每个项目的任务），您可以在循环中使用内置过滤器管道，如下所示：
<tr ng-repeat="tache in tachelistes | filter: {projet_id:projet.IdProjet} | orderBy: 'NomTache'">
该projet.IdProjet字段值将被匹配到projet_id字段值和不匹配，从循环被跳过的元素。
要切换面板，最好使用ng-show。这将根据表达式或函数调用显示或隐藏 DOM 中的元素。像这样例如;
ng-show="hiddenBody[$index]"
这将匹配 index 处的 hiddenBody 数组$index。当评估为真时，ng-show定义的元素将可见。
ngShow 指令根据提供给 ngShow 属性的表达式显示或隐藏给定的 HTML 元素。
我没有尝试过滤 onClick 任务数组，而是简单地定义了 hiddenBody on click 的值。ng-click="hiddenBody[$index] = !hiddenBody[$index]".
检查我在这里进行修改的Plunker。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句