在laravel 5.0

Question

我现在用我的代码已经有近3天的麻烦。我希望有人可以帮助我在这里提出任何想法或正确的解决方案。 我想要的是点击视图信息按钮，它应该显示模态中的所有图像，但在我的代码中，只显示了一个图像。在我的javascipt代码中，我不知道如何循环 即使我尝试过几种方法，也要在脚本内部。

交易

tran_id | title

1       | allownce

2       | food

3       | tuition fee

数据库表2

图像

image_id | tran_id | image_title

1        | 1       | receipt.png

2        | 1       | |receipt2.png

3        | 1       | receipt3.png

4        | 1       | receipt4.png

5        | 2       | receipt.png

6        | 2       | receipt2.png

7        | 2       | receipt3.png

8        | 3       | receipt.png

9        | 3       | receipt2.png

This is the modal Output

控制器

public function index()
{

    $trans = Transaction::with('listImage')->get();

    return view('pages.test',compact('trans'));
}

关系

public function listImage(){
   return $this->hasMany('App\Image','tran_id','tran_id');
}

表格列表

<div class="box-body table-responsive no-padding">
    <table class="table table-bordered">
        <tr>
            <th>title Name</th>
            <th>View</th>
        </tr>
        @foreach($trans as $tran)
        <tr>
           <td>{!! $tran->title !!}</td>
           <td><a class="btn" href="#" data-image-id="" data-toggle="modal" data-title="{!! $tran->title !!}" @foreach($tran['listImage'] as $image) data-image="../Transaction/{!! $image->tran_file !!}" @endforeach data-target="#image-gallery"><button>View Info</button></a></td>  
        </tr>   
       @endforeach
    </table>
</div>



<script type="text/javascript">
$(document).ready(function(){
    loadGallery(true, 'a.btn');
    function loadGallery(setIDs, setClickAttr){
        var current_image,
        selector,
        counter = 0;
        function updateGallery(selector) {
            var $sel = selector;
            var thisImage = $(this).data('image');
            current_image = $sel.data('image-id');
            $('#image-gallery-caption').text($sel.data('caption'));
            $('#image-gallery-title').text($sel.data('title'));
            $('#image-gallery-image').attr('src', $sel.data('image'));
            disableButtons(counter, $sel.data('image-id'));
        }

        if(setIDs == true){
            $('[data-image-id]').each(function(){
                counter++;
                $(this).attr('data-image-id',counter);
            });
        }
        $(setClickAttr).on('click',function(){
            updateGallery($(this));
        });
    }
});
</script>

here the modal image