如何在每個顯示的主題上顯示不同的模態數據？

如何在顯示的每個主題上顯示不同的模態數據？我的問題：顯示每個主題的相同模態數據。如何在每個顯示的主題上顯示不同的模態數據？

我的刀片觀點

@section('content') 
<!-- Main content --> 
<section class="content" style="background-color:#fff; padding-bottom:50px;" id="subjects"> 

<div class="subjects-content"> 
    <h3>List of Subjects</h3> 
    <div class="box-body box-self-evaluation" v-show="subjects.length > 0"> 
    <table id="example2" class="table table-hover table-striped sortable"> 
     <thead> 
     <tr> 
      <th>Subject Area</th> 
      <th>Course Title</th> 
      <th>Failed</th> 
      <th>View more</th> 
    </tr> 
</thead> 
@foreach ($all_subjects as $subject) 
<tbody> 
    <tr> 
     <td> 
     <span> {{ $subject->subject_code }}</span> 
</td> 
<td> 
     <span> {{ $subject->description }} </span> 
</td> 
<td> 
     <span> {{ $subject->grade()->where('grade','F')->count() }} </span> 
</td> 
<td><span> <div class="btn btn-crimson btn-inline-block" data-toggle="modal" data-target="#myModal"><a href="#" class="btn-view-more">View more info</a></div> </span></td> 
</tr>  
</tbody> 

@endforeach 
</table>    
</div> 
<div class="confirmation-buttons-self-evaluation"> 
    <div class="btn btn-blueviolet btn-inline-block btn-create">Go to Self-Evaluation Page</div> 
</div>    

@foreach ($all_subjects as $subject) 
<!--MODAL --> 
<div class="modal fade" id="myModal" role="dialog"> 
    <div class="modal-dialog"> 
     <!-- MODAL content --> 
     <div class="modal-content" style="width:70%; margin:0 auto; margin-top:100px; max-height: calc(100vh - 210px); overflow-y: auto;"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">×</button> 
      <h4 class="modal-title">Subject: {{ $subject->subject_code }}</h4> 
    </div> 

    <div class="modal-body" style="padding-top:0"> 
      <center> 
      <table class="table">  
       <thead> 
       <th colspan="3" style="text-align:center">List of Disgraceful Students</th> 
     </thead> 


     <thead class="failed-header"> 
       <th>Section: <span style="color:#000"> CS <!-- SECTION --> </span></th> 
       <th>Professor: <span style="color:#000"> John Doe <!-- PROF --> </span></th> 
       <th>Failed: <span style="color:#000"> 2 <!-- NUMBER OF FAILED SA SECTION --> </span></th> 
     </thead> 
     <tbody> 
       <tr> 
        <td><img src="{{ asset('dist/img/default.png')}}" class="img-square" alt="User Image" style="height:50px; width:50px"></td> 
        <td style="padding-top: 20px" colspan="2"> John Jashuel </td> 
      </tr> 
      <tr> 
        <td><img src="{{ asset('dist/img/default.png')}}" class="img-square" alt="User Image" style="height:50px; width:50px"></td> 
        <td style="padding-top: 20px" colspan="2"> John Caezar </td> 
      </tr>         
    </tbody> 
</center> 
</table> 
</div> 

<div class="modal-footer"> 
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
</div> 
<!-- /. modal content--> 
@endforeach 
</section> 

@endsection

什麼是錯我的代碼？我該如何解決這個問題？請幫我... 任何建議或意見，非常感謝你！

來源

2016-04-10 sad beginner

這有沒有JavaScript？ –

我沒有包括它。但我使用的是vue.js –

試圖改變

data-target="#myModal"

到

data-target="#{{$subject->id}}"

和ID在< --modal - > 從

id="myModal"

到

id="{{$subject->id}}"

來源

2016-04-10 09:36:49

如何在每個顯示的主題上顯示不同的模態數據？

回答

相關問題