mehrere ng-Wiederholung zeigt nur die erste Zeile

Question

Ich habe ein Problem mit mehreren ng-repeat, die zweite ng-repeat zeigt nur Wert der ersten Zeile. Hier ist die Antwort von 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], 
    }, 

hier ist mein HTML-Code

<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> 

Das Problem ist, wenn ich klicken, um die modale anzuzeigen. Es werden nur Daten aus der ersten Zeile angezeigt. Wenn ich zum Beispiel auf die erste Zeile klicke, werden die Daten korrekt angezeigt, da in der ersten Zeile Daten in lsadditional vorhanden sind, aber wenn die zweite Zeile auf den modalen Anzeigewert aus der ersten Zeile geklickt hat. tatsächlich, wie Sie in der zweiten Reihe sehen, gibt es keine Daten in lsadditional.

Anmerkung: lsadditional ist die Antwort, die ich in modal zeigen wollen

Answer 1

Dies geschieht, weil Sie gleiche ID zuweisen für jede Zeile zur modalen dies mit id Zeilenindex anhängen zu lösen

ändern

<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"> 

Um

<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">