如何使用 AngularJS 和 ng-repeat 指令以模式 bootstrap 显示图像？

Question

我有简单的 AngularJS 应用程序，我正在尝试使用 bootstrap 在 modal 中显示图像，我显示的页面上的所有照片都使用 ng-repeat 指令：

<div class="col-md-3" ng-repeat="photo_item in allPhotosOfSingleAlbum">
   <img id="myImg" ng-src="../Files/Photos/{{photo_item.link}}" width="250px" height="160px" class="img-rounded" />
</div>

我有模态代码：

<div id="imageModal" class="modal">
     <span class="close" onclick="document.getElementById('imageModal').style.display='none'">&times;</span>
     <img class="modal-content" id="img01" />
</div>

请告诉我，如何同时使用 ng-repeat 和 modal？感谢您的回答！

Answer 1

只需将您的第一个代码移动到模态中有 ng-repeat 的位置，您应该能够在那里显示您的图像。

<div id="imageModal" class="modal">
     <span class="close" onclick="document.getElementById('imageModal').style.display='none'">&times;</span>
     <div class="col-md-3" ng-repeat="photo_item in allPhotosOfSingleAlbum">
            <img id="myImg" ng-src="../Files/Photos/{{photo_item.link}}" width="250px" height="160px" class="img-rounded" />
        </div>
</div>

如何使用 AngularJS 和 ng-repeat 指令以模式 bootstrap 显示图像？

How to display images in modal bootstrap using AngularJS and ng-repeat derective?

image-gallery

angularjs

bootstrap-modal