Сделать вложенную область данных ng-repeat специфичной для текущего элемента

Question

Я эффективно пытаюсь создать представление типа master-detail, используя две вложенные таблицы. Требование состоит в том, чтобы просмотреть список кратких записей (мастер), а затем «развернуть» в детали этой сводки, если это необходимо. Детали должны отображаться в таблице под его итоговой записью (мастер), но только если пользователь нажимает кнопку, чтобы просмотреть детали. Мы не хотим получать все детали для всех сводок по загрузке страницы. Данные «Детали» должны быть очищены только через службу «Restful» и отображаться при нажатии на итоговую запись.

Я использую AngularJs для внешнего интерфейса с услугами ASP.Net на внутреннем сервере для данных с помощью интерфейса Restful.

мой взгляд выглядит так (фрагмент):

<table class="table table-responsive table-hover"> 
      <thead> 
      <tr> 
       <th>ProcessorId</th> 
       <th>Processor</th> 
       <th>Oldest</th> 
       <th>Newest</th> 
       <th>Qty</th> 
      </tr> 
      </thead> 
      <tbody> 
      <tr ng-repeat-start="summary in vm.summaries"> 
       <td>{{summary.ProcessorId}}</td> 
       <td>{{summary.ProcessorDescription}}</td> 
       <td>{{summary.OldestTransaction | date: vm.dateFmt}}</td> 
       <td>{{summary.NewestTransaction | date: vm.dateFmt}}</td> 
       <td>{{summary.QtyItemsInQueue}}</td> 
      </tr> 
      <tr ng-repeat-end> 
       <td colspan="4"> 
        <table class="table table-responsive table-hover"> 
         <thead> 
         <tr><th>Meter</th><th>Amount</th><th>Requested</th><th>Session</th><th>Trxn No.</th></tr> 
         </thead> 
         <tbody> 
         <tr ng-repeat="item in vm.salesQueueDetails"> 
          <td>{{item.MeterSerialNumber}}</td> 
          <td>{{item.Amount}}</td> 
          <td>{{item.ReqDateTime | date: vm.dateFmt}}</td> 
          <td>{{item.SessionNumber}}</td> 
          <td>{{item.TransactionNumber}}</td> 
         </tr> 
         </tbody> 
        </table> 
       </td> 
       <td><button class="btn" type="button" ng-click="vm.getSalesQueueDetail(summary.ProcessorId)">details for {{summary.ProcessorId}}</button></td> 
      </tr> 
      </tbody> 
     </table> 

vm.summaries загружается контроллером при запуске, никаких проблем там.

Проблема возникает, когда я нажимаю кнопку сведений, чтобы вызвать vm.getSalesQueueDetail для выбранного идентификатора. Полученные данные затем повторяются для каждой итоговой (основной/родительской) записи, а не только для основной записи, на которую она была нажата.

Как ограничить привязку данных моих данных только к соответствующей сводной (основной/родительской) записи?

Answer 1

В вашей второй нг-повторять вы должны назначить данные для текущего резюме и глобально не так:

<tr ng-repeat="item in summary.salesQueueDetails"> 

И тогда в вашем контроллере вы должны назначить детали к резюме, как:

$scope.getSalesQueueDetail = function(summary){ 
    ...after getting the data 
    summary.salesQueueDetails = data; 
} 

Надеюсь, он поможет =)