Question

所以我有这个索引页面有任务列表，在表格里面是任务和动作的标题，我想要做的是当我点击任务标题时模态会弹出而在模态中是它的主体和所述任务的内容..这里是代码

控制器

public function index()
{   
    $posts = Post::orderBy('created_at', 'desc')->paginate(10);
    return view('posts.index')->with('posts', $posts);
}

索引页

  @extends('layout.app')
  @section('content')
  <div class="container">
    <div class="col-md-6" style="float:left;">
        <h2>Todo List</h2>
        <div class="table-hover">
          <table class="table">
          <thead class="thead-default">
          <tr>
          <th>Title</th>
          <th>Status</th>
          <th>Action</th>
          </tr>
          </thead>
          <tbody>
           @if(count($todos) > 0)
            @foreach($todos as $todo)
            <tr>
                <th><a href="/todo/{{$todo->id}}" data-toggle="modal" data-target="#exampleModal3">{{$todo->title}}</a></th>
                <td>{{$todo->status}}</td>
                <td><a class="btn btn-sample btn-sm">Edit</a> <a class="btn btn-sample2 btn-sm">Delete<a></td>
            </tr>
          </tbody>
            @endforeach
                @else
                <th><h2>Nothing to show</h2></th>
            @endif
          </table>
        </div>
    </div>

同一页下方的模式

                                                                         <div class="modal fade" id="exampleModal3" tabindex="-1" role="dialog" aria-labelledby="exampleModal3Label" aria-hidden="true">
   <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModal3Label">View task</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
        </button>
       </div>
        <div class="modal-body">
        <h3>{{$todo->title}}</h3>
        </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>

Answer 1

有两种方法可以实现这一点，要么使用带有id的唯一tr或记录重复模式，要么创建一个模态，onClick从{{1}带来数据}或ajax，并在模态中填充它。我向你解释了第一个也是最简单的一个

javascript

将数据传递到同一页面中的模态，Laravel

1 个答案: