如何在弹出窗口中显示标签？拉拉维尔

Question

我有一个简单的页表，我在其中显示页面列表，视觉效果如下。

预期结果：

现在我希望当用户点击查看标签时，它应该显示与该页面相关的标签

例如，如果用户单击 ID 为 6 的第一行上的视图标签，它应该在弹出模式中显示标签 tes1 如果用户单击 ID 为 7 的第一行上的视图标签，它应该在弹出模式

问题：

现在，当用户单击任一行中的按钮视图标签时，我会得到以下结果

这是当用户单击查看标签按钮时我在弹出窗口中显示标签的方式

<button type="button" class="btn btn-sm btn-success" data-toggle="modal" data-target="#exampleModal">
    {{ __('view tags') }}
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Tag List</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <table class="table">
                    <thead class=" text-primary">
                        <th>
                            ID
                        </th>
                        <th>
                            name
                        </th>
                    </thead>
                    <tbody>
                        @foreach ($page->tags as $tag)
                        <tr>
                            <td>
                                {{ $tag->tag->id }}
                            </td>
                            <td>
                                {{ $tag->tag->name }}
                            </td>
                        </tr>
                        @endforeach

                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

这是我的存储库： my demo repository

Answer 1

您是否在 foreach 循环中创建模式和按钮代码？

如果是这样 - 我并不是说它是完美的解决方案，但它确实有效。我认为可能是问题在于您的模型打开按钮属性数据目标对于每一个都完全相同。此外，每一行的模态 ID 都是相同的。

所以每次你点击打开模式按钮时，它都会打开第一个模式，也就是你图片中的那个。

我建议做的是制作 1 个模态，单击按钮时使用 JavaScript 更改哪些内容。

如果您不想使用 JavaScript，则应向模态 ID 和按钮数据目标添加唯一值。 这是按钮的示例：

<button type="button" class="btn btn-sm btn-success" data-toggle="modal" data-target="#exampleModal{{$page->id}}">
{{ __('view tags') }}

</button>

模态第一行示例：

<div class="modal fade" id="exampleModal{{$page->id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

Answer 2

您的代码的问题是它总是显示第一个模式。

这里是解决方案：-

 <button type="button" class="btn btn-sm btn-success" data-toggle="modal" data-target="#exampleModal-{{ PageID }}">
        {{ __('view tags') }}
    </button>

    <!-- Modal -->
@foreach ($pages as $page)
    <div class="modal fade" id="exampleModal-{{ $page->ID }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Tag List</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <table class="table">
                        <thead class=" text-primary">
                            <th>
                                ID
                            </th>
                            <th>
                                name
                            </th>
                        </thead>
                        <tbody>
                            @foreach ($page->tags as $tag)
                            <tr>
                                <td>
                                    {{ $tag->tag->id }}
                                </td>
                                <td>
                                    {{ $tag->tag->name }}
                                </td>
                            </tr>
                            @endforeach

                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
@endforeach

另一种解决方案

点击查看标签按钮调用ajax并更新模态数据。

Answer 3

将您的页面 ID 传递到您的模式中

<button type="button" class="btn btn-sm btn-success" data-toggle="modal" data-target="#exampleModal{{$page->id}}">
    {{ __('view tags') }}
</button>

<div class="modal fade" id="exampleModal{{$page->id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Tag List</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <table class="table">
                    <thead class=" text-primary">
                        <th>
                            ID
                        </th>
                        <th>
                            name
                        </th>
                    </thead>
                    <tbody>
                        @foreach ($page->tags as $tag)
                        <tr>
                            <td>
                                {{ $tag->tag->id }}
                            </td>
                            <td>
                                {{ $tag->tag->name }}
                            </td>
                        </tr>
                        @endforeach

                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>