如何在modal上发送数据，并在foreach上使用。

Question

我想这是不可能的，但我想试着问一下......

我在bladelaravelbootstrap4页面上，我想用按钮上下文中的一些数据打开一个模式，但我不明白如何弹出模式。

我的按钮是这样的。

@foreach($workflows as $workflowId => $tasks)
                                <button type="button"
                                        class="btn btn-primary bottoneblu"
                                        data-toggle="modal"
                                        data-target="#exampleModal"
                                        data-title="{{$workflowId}}"
                                        data-tasks="{{json_encode($tasks)}}">

                                </button>
@endforeach

然后用一些jquery来实现目标。

$(document).ready(function(e) {
                $('#exampleModal').on('show.bs.modal', function (event) {
                    var button = $(event.relatedTarget) // Button that triggered the modal

                    var title = button.data('title')
                    var tasks = button.data('tasks')

                    var modal = $(this)
                    modal.find('.modal-title').text('Workflow numero: ' + title)
                })
            });

而相关的模态应该是这样的：

  <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">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                       @foreach (json_decode($tasks as $task)
                                {{$task->something}}
                       @endforeach
                </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>

标题部分还能用，但我不清楚是否可能，就是传递"$tasks "并使用它，而不需要一个表单或通过http重定向或在按钮部分添加十几个数据什么的，甚至因为任务可以是1个或很多......所以我不能在按钮上逐个字段填写。

Answer 1

不要在模态模板内评估任务json对象，而是在模态模板内评估任务json对象。show.bs.modal 事件处理程序。

去掉这部分。

@foreach (json_decode($tasks as $task)
  {{$task->something}}
@endforeach

然后把这个添加到你的事件处理程序中。

$.each(tasks, function() {
    modal.find('.modal-body').append( this.something );
});