Question

我有项目列表，在每个项目中都有很多任务，我的想法是使用折叠面板，其中标题是项目的名称，内容是任务的信息，唯一的问题我和＃39; m facing是元素的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;
             });
         }

这是一个掠夺者：https://plnkr.co/edit/JMJU3YfPJkQwBfDyS6E0?p=preview

Answer 1

对于您的第一个问题（您需要过滤每个项目的任务），您可以在循环中使用内置的filter pipe，如下所示：

<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数组。当评估为真实时，定义ng-show的元素将变为可见。

ngShow指令显示或隐藏基于的给定HTML元素表达式提供给ngShow属性。

我没有尝试过滤onClick上的任务数组，而只是在click上定义hiddenBody的值。 ng-click="hiddenBody[$index] = !hiddenBody[$index]"。

检查我进行修改的{strong> Plunker here。

使用ng-repeat更改折叠面板内容

1 个答案: