AngularJS double ng-repeat

Question

Я работаю над группой аккордеона и имею два ng-repeat. Внешняя повторяет недели с текущей недели до определенной даты. Внутренний повторяет рабочее время в течение нескольких дней каждую неделю.

Функция expand (week.id) предназначена для вызова базы данных и подготовки данных для переменной «час».

Моя проблема заключается в том, что когда я нажимаю на одну аккордеонную рубрику для отображения данных на неделе №1, остальные остальные недели (аккордеоны) также показывают одни и те же данные, что делает этот процесс очень медленным.

Как я мог просто визуализировать trs под заголовком, где я нажал? Например, мой сценарий - когда я нажимаю на заголовок недели №1, отображаются только trs в течение недели # 1.

Может ли кто-нибудь помочь мне с этим?

<accordion-group ng-repeat="week in weeks"> 
     <accordion-heading > 
      <span ng-click="expand(week.id)">{{week.firstday}}--{{week.lastday}}</span> 
     </accordion-heading> 
     <table class="table table-striped"> 
      <thead> 
      <tr> 
       <th>Task</th> 
       <th>Sun</th> 
       <th>Mon</th> 
       <th>Tue</th> 
       <th>Wed</th> 
       <th>Thu</th> 
       <th>Fri</th> 
       <th>Sat</th> 
       <th>Total</th> 
      </tr> 
      </thead> 
      <tbody id={{week.id}}> 
      <tr ng-repeat="hr in hour"> 

       <td> <select class="form-control input-sm" ng-disabled="false"><option value="hr.task_name">{{hr.task_name}}</option></select></td> 
       <td><input type="number" min="0" ng-model="hr.sun" class="form-control" placeholder="Hours" ng-disabled="true"></td> 
       <td><input type="number" min="0" ng-model="hr.mon" class="form-control" placeholder="Hours" ng-disabled="true"></td> 
       <td><input type="number" min="0" ng-model="hr.tue" class="form-control" placeholder="Hours" ng-disabled="true"></td> 
       <td><input type="number" min="0" ng-model="hr.wed" class="form-control" placeholder="Hours" ng-disabled="true"></td> 
       <td><input type="number" min="0" ng-model="hr.thu" class="form-control" placeholder="Hours" ng-disabled="true"></td> 
       <td><input type="number" min="0" ng-model="hr.fri" class="form-control" placeholder="Hours" ng-disabled="true"></td> 
       <td><input type="number" min="0" ng-model="hr.sat" class="form-control" placeholder="Hours" ng-disabled="true"></td> 
       <td><span class="form-control">{{hr.sun+hr.mon+hr.tue+hr.wed+hr.thu+hr.fri+hr.sat}}</span></td> 
      </tr> 
      </tbody> 
     </table> 
     </accordion-group> 

Answer 1

Потому что все недели разделяют одну и ту же переменную hour, расширяя один заголовок, это приведет к перезаписыванию той же переменной, изменяя содержимое всех внутренних панелей ng-repeat.

Вместо этого, вам необходимо либо сделать hour свойство каждого объекта в weekweeks, или вам нужно иметь отдельный объект/карту, которая хранит множество часов против week.id.

Для последнего, имеют следующую строку в начале вашего контроллера:

$scope.hours = {}; 

Затем в expand() функции, вместо того, чтобы заселить $scope.hour, заселить $scope.hours[weekId].

Наконец, изменить свое внутреннее ng-repeat выражение:

hr in hours[week.id] 

Answer 2

час в час может сделать все, что в одной и той же модели час, в этом случае Вам нужно отделить модель, как в час week.hour, если вы можете сделать час в собственность недели. Если вы не можете попробовать нг-Init, как это, если час и недели коррелируют, где часы вместо того, чтобы быть массивом часов, что дисплей представляет собой массив из массивов, которые имеют дисплей часов:

<accordion-group ng-repeat="week in weeks" ng-init="weekIndex = $index"> 
    <accordion-heading > 
     <span ng-click="expand(week.id)">{{week.firstday}}--{{week.lastday}}</span> 
    </accordion-heading> 
    <table class="table table-striped"> 
     <thead> 
     <tr> 
      <th>Task</th> 
      <th>Sun</th> 
      <th>Mon</th> 
      <th>Tue</th> 
      <th>Wed</th> 
      <th>Thu</th> 
      <th>Fri</th> 
      <th>Sat</th> 
      <th>Total</th> 
     </tr> 
     </thead> 
     <tbody id={{week.id}}> 
     <tr ng-repeat="hr in hours[weekIndex]"> 

      <td> <select class="form-control input-sm" ng-disabled="false"><option value="hr.task_name">{{hr.task_name}}</option></select></td> 
      <td><input type="number" min="0" ng-model="hr.sun" class="form-control" placeholder="Hours" ng-disabled="true"></td> 
      <td><input type="number" min="0" ng-model="hr.mon" class="form-control" placeholder="Hours" ng-disabled="true"></td> 
      <td><input type="number" min="0" ng-model="hr.tue" class="form-control" placeholder="Hours" ng-disabled="true"></td> 
      <td><input type="number" min="0" ng-model="hr.wed" class="form-control" placeholder="Hours" ng-disabled="true"></td> 
      <td><input type="number" min="0" ng-model="hr.thu" class="form-control" placeholder="Hours" ng-disabled="true"></td> 
      <td><input type="number" min="0" ng-model="hr.fri" class="form-control" placeholder="Hours" ng-disabled="true"></td> 
      <td><input type="number" min="0" ng-model="hr.sat" class="form-control" placeholder="Hours" ng-disabled="true"></td> 
      <td><span class="form-control">{{hr.sun+hr.mon+hr.tue+hr.wed+hr.thu+hr.fri+hr.sat}}</span></td> 
     </tr> 
     </tbody> 
    </table> 
</accordion-group>