Question

在表中，显示了我的项目集合返回的每个项目的名称，注释和编辑按钮。单击“编辑”按钮时，应调用具有用于更新项目的表单的模式。

问题

如果从集合中返回了多个项，则只有最后一项的编辑按钮调用模式，而其他项的编辑按钮则不执行任何操作。我需要修复代码的帮助，以便无论集合中有多少项，编辑按钮都将始终调用模式。

项目表列表

ngAfterViewInit

模式

<div class="col-12 table-responsive">
<table class="table table-striped">
    <tbody>
        @foreach ($items as $item)
            <tr class="text-muted">
                <td class="text-capitalize">{{ $item->name }}</td>
                <td>{{ $item->comment }}</td>
                <td>
                    <button type="button" class="btn-custom-one" data-toggle="modal" data-target="#editItem{{$item->id}}"><i class="fas fa-edit"></i>&nbsp; Edit</button>&nbsp;
                </td>
            </tr>
        @endforeach
    </tbody>
</table>
</div>

Answer 1

您的代码稍有改动。想这样的事情。您必须在循环内调用模式。现在您可以通过在函数中定义此模态或进行硬编码来做到这一点。我认为这会有所帮助

<div class="col-12 table-responsive">
<table class="table table-striped">
    <tbody>
        @foreach ($items as $item)
            <tr class="text-muted">
                <td class="text-capitalize">{{ $item->name }}</td>
                <td>{{ $item->comment }}</td>
                <td>
                    <button type="button" class="btn-custom-one" data-toggle="modal" data-target="#editItem{{$item->id}}"><i class="fas fa-edit"></i>&nbsp; Edit</button>&nbsp;
<div class="modal fade" id="editItem{{$item->id}}" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-body">
            <form action="/home/items/{{$item->id}}/update" method="POST">
                @method('PUT')
                @csrf
                <div class="form-group">
                    <label for="Name">Name</label>
                    <input type="text" name="name" value="{{$item->name}}" class="form-control">
                </div>

                <div class="form-group">
                    <label for="comment">Comment</label>
                    <textarea name="comment" class="form-control" cols="30" rows="5">{{$item->comment}}</textarea>
                </div>

                <button type="submit" class="btn btn-custom-two">Save</button>
            </form>
        </div>
    </div>
</div>
</div>
                </td>
            </tr>
        @endforeach
    </tbody>
</table>
</div>

单击按钮时调用模态

1 个答案: