带有 foreach 循环的引导模式。如何传递 foreach 参数？答案

【问题标题】：Bootstrap Modal with foreach loop. How can pass the foreach argument?带有 foreach 循环的引导模式。如何传递 foreach 参数？
【发布时间】：2020-03-15 00:06:01
【问题描述】：

我正在使用 PHP (Laravel 5.3) 并开发一个带有 Bootstrap 模式的 Blade 视图，该模式内部有一个 foreach 循环以显示太多行。这个模式是从一个表格中调用的，在每一行的末尾都有一个按钮来获取更多细节（这个细节是一个数组）。

那么，如何将数组数据传递给模态？

<div class="table-responsive">
    <table class="table table-bordered m-table" id="business">
        <thead class="columns">     
            <tr>
                <th class="column1">Name</th>
                <th class="column2">Contact</th>
                <th class="column3">Details</th>
            </tr>
        </thead>
        <tbody class="main-rows list" >
            @foreach ($listBusiness as $business)
                <tr>                                                        
                    <td class="column1">{{$business->name}}</td>
                    <td class="column2">{{$business->contact}}</td>
                    <td class="column7">
                        <a data-toggle="modal" data-target="#modalBusinessDetails">
                            <i class="la la-search"></i>
                        </a>
                    </td>                           
                </tr>
            @endforeach
        </tbody>
    </table>
</div>

<!-- Modal table -->
<div class="modal" id="modalBusinessDetails" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body text-center">
                <div class="col-12">                                
                    <div class="table-responsive">
                        <table class="table table-bordered m-table" id="business">
                            <thead class="columns">     
                                <tr>
                                    <th class="column1">Created at</th>
                                    <th class="column2">Active</th>
                                    <th class="column2">Employees</th>
                                </tr>
                            </thead>
                            <tbody class="main-rows">
                                @foreach ($ListDetail as $BusinessDetail)
                                    <tr>
                                        <td class="column1">{{$BusinessDetail->created_at}}</td>
                                        <td class="column2">{{$BusinessDetail->active}}</td>
                                        <td class="column3 text-center">{{$BusinessDetail->employees}}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="btn group">
                    <button type="button" data-dismiss="modal">{{Tr('Close')}}</button>
                </div>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

你需要使用javascript来改变modal的内容
或者，制作多个模态（不推荐）
这就是为什么有 AJAX，在你的按钮上把一些 id 放在一个函数中，点击那个按钮后你可以进行 AJAX 调用以从数据库中检索更多数据

标签： javascript php jquery bootstrap-modal

【解决方案1】：

就像@Vidal 所说，这需要 JS（AJAX、AXIOS 等）这是我的示例控制器方法，您可以将其用于类似的事情。

function getData(Request $request)
{
   $data = DB::table('table_name')->get(); //can be done differently
   //create separate view for dynamic data e.g table <tbody>AJAX or AXIOS response</tbody>
   $returnHTML = view('view_name',compact('data'))->render();

   return response()->json( ['success' => true, 'html' => $returnHTML] );

}

希望对你有帮助。

【讨论】：