同じページでモーダルにデータを渡します。

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

あり、これを達成するには、2つの方法があり、どちらかあなたはtrまたはレコードにユニークなidであなたのモーダルを繰り返し、またはあなたが1個のモーダルを作成し、onClickajaxまたはjavascriptからデータを持参し、塗りつぶしそれはモーダルです。 私はあなたが部分的にあなたのモーダルのコードを抽出し、このようにそれを変数oに渡すとそれを含むことができ、あなたの最初と最も簡単な1

@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="#exampleModal{{ $loop->iteration }}.">{{$todo->title}}</a> 
        <div class="modal-dialog" role="document"> 
         <div class="modal-content"> 
          <div class="modal-header"> 
          <h5 class="modal-title" id="exampleModal3Label{{ $loop->iteration }}">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> 

       </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>