2017-11-21 1 views
0

ng-repeat이 여러 개인 문제가 있습니다. 두 번째는 ng-repeat이며 첫 번째 행의 값만 표시합니다. 여기 http.get복수 행 반복 만 첫 행을 표시합니다.

[ 
     { 
    "customerid": 
    "paydate": 
    "amount": 
    "acquirementid": 
    "tracking_ref": 
    "billerdesc": 
    "productdesc": 
    "hpno": 
    "email": 
    "rc": 
    "rcdesc": 
    "lsadditonal": [ 
     { 
    "label": " test ", 
    "value": "", 
    "required": "mandatory", 
    "type": "text", 
    "typeemail": null, 
    "valuestruk": null 
    } 
] 
    }, 
     { 
    "customerid": "", 
    "paydate": "", 
    "amount": "", 
    "acquirementid": "", 
    "tracking_ref": "", 
    "billerdesc": "", 
    "productdesc": "", 
    "hpno": "", 
    "email": null, 
    "rc": null, 
    "rcdesc": null, 
    "lsadditonal": [null], 
    }, 

의 반응이다 여기에 내 HTML 코드 내가 모달을 보여 버튼을 클릭

<table class="table table-bordered"> 
      <thead> 
       <th>CustomerID</th> 
       <th>Paydate</th> 
       <th>Amount</th> 
       <th>AcquirementID</th> 
       <th>Tracking_ref</th> 
       <th>BillerDesc</th> 
       <th>ProductDesc</th> 
       <th>HpNo</th> 
       <th>Email</th> 
       <th>Rc</th> 
       <th>Rcesc</th> 
       <th>Detail</th> 
      </thead> 
      <tbody ng-repeat="item in coba"> 
        <tr> 
        <td>{{item.customerid}}</td> 
        <td>{{item.paydate}}</td> 
        <td>{{item.amount}}</td> 
        <td>{{item.acquirementid}}</td> 
        <td>{{item.tracking_ref}}</td> 
        <td>{{item.billerdesc}}</td> 
        <td>{{item.productdesc}}</td> 
        <td>{{item.hpno}}</td> 
        <td>{{item.email}}</td> 
        <td>{{item.rc}}</td> 
        <td>{{item.rcdesc}}</td> 
        <td> 
         <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Lihat Detail Transaksi</button> 
         <div class="modal fade" id="myModal" role="dialog"> 
         <div class="modal-dialog modal-lg"> 
         <div class="modal-content"> 
         <div class="modal-header"> 
         <button type="button" class="close" data-dismiss="modal">&times;</button> 
         <h4 class="modal-title">Detail </h4> 
         </div> 
         <div class="modal-body"> 
          <table> 
           <thead> 
            <th>Label</th> 
            <th>Value</th> 
           </thead> 
           <tbody ng-repeat="item2 in item.lsadditonal"> 
           <td>{{item2.label}}</td> 
           <td>{{item2.value}}</td> 
          </tbody> 
          </table> 
         </div> 
         <div class="modal-footer"> 
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
         </div> 
         </div> 
         </div> 
         </div> 
        </td> 
       <p>Total Rows : {{coba.length}}</p> 
       </tr> 
      </tbody> 
     </table> 

문제가있다. 첫 번째 행의 데이터 만 표시합니다. 예를 들어 첫 번째 행을 클릭하면 첫 번째 행에 lsadditional의 데이터가 있지만 두 번째 행이 첫 번째 행의 값을 표시하는 모달을 클릭했기 때문에 데이터가 올바르게 표시됩니다. 실제로 두 번째 행에서 볼 수 있듯이 lsadditional에서는 데이터가 없습니다.

참고 : lsadditional 내가 모달에 표시하려는 응답입니다

+2

안녕하세요, [plunker] (https://plnkr.co/edit/?p=preview) 또는 [fiddle] (https://jsfiddle.net/)을 만들 수 있습니다. –

+0

시도해 보았습니다. ,하지만 모달을 보여주는 질수. 하지만 나는 아무 모달로도 만들지 않을거야. 괜찮 니? –

+0

질문에 이미 답변되었습니다. 고마워, 그게 작동합니다 –

답변

0

이이 ID로 행 인덱스를 부착 해결하기 위해 모든 행에 대해 모달 동일한 ID를 할당하기 때문에 이런 일이

변경

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Lihat Detail Transaksi</button> 
    <div class="modal fade" id="myModal" role="dialog"> 

으로
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal_{{$index}}">Lihat Detail Transaksi</button> 
<div class="modal fade" id="myModal_{{$index}}" role="dialog"> 
+0

답변 주셔서 감사합니다. 정말 고마워요 –

+0

다행히 도왔습니다 ... – jitender

관련 문제