複数のng-repeatは最初の行を表示するだけです

Question

複数のng-repeatに問題があり、2番目の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のデータがありますが、2行目が最初の行の値を示すモーダルをクリックしたため、データが正しく表示されます。実際には2番目の行に表示されているように、そこにはデータがありません。

注：lsadditionalは、私は、モーダルに表示したいという応答である

Answer 1

あなたは、これは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">