Question

我遇到多个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是我想在模态中显示的响应

Answer 1

这种情况正在发生，因为你为每一行分配了相同的id到modal来解决这个带有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">

多重ng-repeat仅显示第一行

1 个答案: