javascript - Laravel 中的动态引导模式
问题描述
我想在 Bootstrap Modal 中动态显示产品详细信息。这是我的控制器
$products = Product::all();
return view('landing')->with('products', $products);
而我的看法
@foreach($products as $index => $product)
<div class="product-text col-lg-6">
<h3><a href="#">{{$product->name}}</a></h3>
<div class="product-meta">
<p>{{$product->details}}</p>
</div>
<a data-toggle="modal" data-target="{{ $index }}">Modal</a>
</div>
@endforeach
<div class="modal fade" id="{{ $index }}" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">{{$product->name}}</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>{{$product->description}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
如何显示特定产品的详细信息?
解决方案
我们可以使用 2 种方法来解决此问题。
用于
foreach
包含模型代码。实际上,这不是一个好方法。加载页面需要更多时间,这不是一个好习惯使用
ajax
. 这是通过单击按钮在模型上显示您的产品详细信息的最佳方式
所以你可以使用第二种方式。
推荐阅读
- vue.js - 在 this.$axios.post 之后重定向到另一个页面有问题
- python - Python Cassandra 驱动程序未安装,或未安装在 Ubuntu 上的 PYTHONPATH 上
- android - 为 iOS 或 Android 自定义 Flutter 应用程序中的 Native Alert 对话框以实现 Face Id
- android - 复杂错误:使用自定义测试文件夹时 androidx.test.ext.junit.runners 不存在
- javascript - 如果您在 angularjs 中有多个控制器,那该有多好
- string - 用 x86 汇编语言打印字符串时出现奇怪的字符?
- kubernetes - 如何根据 AWS SQS 队列大小扩展 GKE 部署
- android-emulator - 在 Android 模拟器中不使用 -writable-system 时主机文件的更改丢失
- node.js - 续集功能在哪里
- python - Python 序列化对象和解码返回无效的起始字节错误