Question

我想从循环中发送数据以在模态中显示一些细节。但是模态总是从循环中获取最后一个值。

<table class="table table-striped table-hover table-bordered" id="table">
    <thead>
        <tr>
            <th>Kode Nota</th>
            <th>Tanggal Transaksi</th>
            <th>Nama Kosumen </th>
            <th>Nomor Telpon </th>
            <th>Status Transaksi</th>
        </tr>
    </thead>
    <tbody>
        @foreach($transaksi as $data)
        <tr>
            <td><?= $data->kodeNota?></td>
            <td><?= $data->tanggalTransaksi?></td>
            <td><?= $data->namaKonsumen ?></td>
            <td><?= $data->noTelpKonsumen ?></td>
            <td><?= $data->statusTransaksi ?></td>
            <td><a data-item="{{ $data->kodeNota }}" class="btn btn-block" data-toggle="modal" data-target="#modalDetail">Detail</a></td>
        </tr>
        @endforeach
    </tbody>
</table>

这是显示细节的模式

<div class="modal fade" id="modalDetail" tabindex="-1" role="dialog" aria-labelledby="detailModal" aria-hidden="true">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel"></h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body edit-content">
            <h5 class="text-center">Detail Transaki {{$data->kodeNota}}</h5>
        </div>
    </div>
</div>

Answer 1

您可以通过两种方式做到这一点。

方法1： 在单击发送ajax请求以获取数据时获取所需的对象ID。解析/将数据写入模态主体，然后打开模态。

方法2： This is tricky and easier but very bad approach。通过使用单独的唯一ID为每一行生成单独的唯一模式。

@foreach($transaksi as $data)
        <tr>
            <td><?= $data->kodeNota?></td>
            <td><?= $data->tanggalTransaksi?></td>
            <td><?= $data->namaKonsumen ?></td>
            <td><?= $data->noTelpKonsumen ?></td>
            <td><?= $data->statusTransaksi ?></td>
            <td><a data-item="{{ $data->kodeNota }}" class="btn btn-block" data-toggle="modal" data-target="#modalDetail-{{$data->id}}">Detail</a></td>
        </tr>

<div class="modal fade" id="modalDetail-{{$data->id}}" tabindex="-1" role="dialog" aria-labelledby="detailModal" aria-hidden="true">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel"></h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body edit-content">
            <h5 class="text-center">Detail Transaki {{$data->kodeNota}}</h5>
        </div>
    </div>
</div>
@endforeach

Answer 2

您可以使用Jquery轻松实现。在按钮中添加自定义属性，就像您已经data-item="{{ $data->kodeNota }}"一样，但是如果要像下面那样在模式中填充其他值，则发送完整的对象，而不是发送一个值，

<td><a data-item="{{ $data }}" class="btn btn-block details-button" data-toggle="modal" data-target="#modalDetail">Detail</a></td>

在模式按钮中添加事件功能，

$(document).on('click', '.details-button', function (e) {
      e.preventDefault();
      var item = $(this).data('item');
      // for debug purpose you can console.log(item) and can actaully see you get the item object or not.

      $('#modalDetail .text-center').text(item.kodeNota);

      //update if you give your label a id
      $('#modalDetail #kodeNota').text(item.kodeNota);

      // you can populate your other data here
      $('#modalDetail .text-center-two').text(item.other_data);
}

在同一视图中将数据从循环解析为模态总是得到最后一个数据

2 个答案: