Question

我想创建动态模型弹出窗口，所以我写了下面的js代码..但是当我点击单个图像然后模型弹出显示动态创建的div中的所有图像内容。我希望在模型弹出窗口中显示相同的图像及其内容。

＆＃13;

<script>
    $("#pop").on("click", function() {
        $('#imagepreview').attr('src', $('#imageresource').attr('src'));
        $('#imagemodal').modal('show');

    });
</script>

＆＃13;

<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12" >

                                    <div class="row">
                                        <div id="pop">
                                            <a href="#" class="dialogpopup" style=" height: auto;width: 600px;display: -webkit-inline-box;">
                                                <div ng-repeat="Spaces in SpaceList" style="height:auto!important;display: table-caption;">
                                                    <span>{{Spaces.Name}}</span>
                                                    <img id="imageresource" src="{{Spaces.Image}}" style="width:200px; height: 200px;">
                                                    <span>{{Spaces.MaxCapacity}}</span>
                                                </div>
                                            </a>
                                        </div>
                         

                                        <!-- Modal -->
                                        <div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                                                        <h4 class="modal-title" id="myModalLabel">{{Spaces.Name}}</h4>
                                                    </div>
                                                    <div class="modal-body addright"  id="modelimg1" ng-repeat="Spaces in SpaceList">
                                                        <img src="{{Spaces.Image}}" id="imagepreview" style="width:400px; height: 270px;">
                                                        <p class="parapadding">
                                                            Name:{{Spaces.Name}}<br />
                                                            Description:{{Spaces.Description}}<br />
                                                            Size:{{Spaces.Size}}<br />
                                                            Capacity:{{Spaces.MaxCapacity}}<br />
                                                            Configuration:<br />

                                                        </p>
                                                    </div>


                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

＆＃13;

Answer 1

任何标记的ID参数都应为唯一。在你的转发器中你有相同的ID。将其更改为id="{{'imagepreview' + $index}}"和。{ ng-repeat="Spaces in SpaceList track by $index"

jquery动态图库画廊弹出显示所有图像

1 个答案: