时间戳

首页 > 解决方案 > 在同一视图中从循环解析数据到模态总是得到最后一个数据

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

问题描述

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

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

标签： laravel

解决方案

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

方法一： 点击发送ajax请求获取所需对象id获取数据。解析/将数据写入模态体，然后打开模态。

方法二： 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

推荐阅读