중첩 된 ng-repeat 데이터 범위를 현재 항목에 맞게 지정하십시오.

Question

두 개의 중첩 테이블을 사용하여 마스터 - 세부 유형보기를 효과적으로 만들려고합니다. 요구 사항은 요약 레코드 (마스터) 목록을보고 원하는 경우 요약 요약을 "드릴 다운"하는 것입니다. 세부 정보는 (마스터) 요약 레코드 아래 테이블에 표시되지만 사용자가 단추를 클릭하여 세부 정보를 볼 경우에만 표시됩니다. 우리는 페이지로드시 모든 요약에 대한 모든 세부 정보를 가져오고 싶지 않습니다. 세부 정보의 데이터는 Restful 서비스를 통해서만 표시되고 요약 레코드를 클릭하면 표시됩니다.

Restful 인터페이스가있는 데이터의 경우 백엔드에서 ASP.Net 서비스를 사용하여 프런트 엔드에 AngularJs를 사용하고 있습니다.

내보기는이 (조각)처럼 보인다 없습니다 :

<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 시작시 컨트롤러에 의해로드, 아무 문제가.

세부 정보 단추를 클릭하여 선택한 ID에 대해 vm.getSalesQueueDetail을 호출하면 문제가 발생합니다. 그런 다음 결과 데이터는 클릭 한 마스터 레코드뿐만 아니라 모든 요약 (마스터/상위) 레코드에 대해 반복됩니다.

내 세부 정보 데이터의 바인딩을 해당 요약 (마스터/상위) 레코드로만 제한하려면 어떻게합니까? 에서

Answer 1

두 번째 NG-반복 현재 요약 데이터를 할당하지 세계적과 같이해야합니다

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

그리고 컨트롤러에 당신이 좋아하는 요약 세부 사항을 지정해야합니다 :

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

희망 하시겠습니까?)