Question

我有简单的AngularJS应用程序，我在模态中使用 bootstrap 尝试显示图像，第i页的所有照片都显示使用 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 derective在模态引导程序中显示图像？

1 个答案: