javascript - 从 Angular ng-repeat 单击时将图像动态添加到 Bootstrap Modal 中

Question

我有一个照片页面，我想允许用户单击以将该特定图像放大到 Bootstrap 模式中。如何在单击时将每个特定图像动态添加到模式中。我的 html 如下所示:

<div class="container fishing-picture-container">
   <div ng-repeat="picture in fishingPictures" ng-if="$index % 3 == 0" class="row row-buffer">
     <div class="col-md-4" ng-if="fishingPictures[$index].name">
        <figure>
            <img class="fishing-pics" ng-src="img/fishing/{{fishingPictures[$index].name}}" ng-click="showModal(fishingPictures[$index].name)" />
        </figure>
     </div>
     <div class="col-md-4" ng-if="fishingPictures[$index + 1].name">
        <figure>
            <img class="fishing-pics" ng-src="img/fishing/{{fishingPictures[$index + 1].name}}" ng-click="showModal(fishingPictures[$index + 1].name)" />
        </figure>
     </div>
     <div class="col-md-4" ng-if="fishingPictures[$index + 2].name">
        <figure>
            <img class="fishing-pics" ng-src="img/fishing/{{fishingPictures[$index + 2].name}}" ng-click="showModal(fishingPictures[$index + 2].name)" />
        </figure>
     </div>
  </div>
</div>


<!-- Creates the bootstrap modal where the image will appear -->
<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">Image preview</h4>
       </div>
    <div class="modal-body">
         <img src="" id="imagepreview">
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
     </div>
   </div>
</div>

我想我会调用一个函数来传递图像的名称，然后将其添加到模式中，但似乎不起作用。这似乎是最好的解决办法吗？理想情况下，我希望看到与单击此链接中的图像时类似的外观:

http://www.w3schools.com/howto/howto_css_modal_images.asp

Answer 1

Angular 脚本

  $scope.showModal = function (imageName) {        
            angular.element("#imagemodal").modal("show");
            $scope.ImageName = "Path here...."+ imageName;
        }

HTML

<div class="modal-body">
         <img ng-src="{{ImageName}}" id="imagepreview">
 </div>

--------------------------------------或----- --------------------------------

HTML

<figure>
            <img class="fishing-pics" ng-src="img/fishing/{{fishingPictures[$index + 2].name}}" data-target="#imagemodal" data-imgname="{{fishingPictures[$index + 2].name}}" data-toggle="modal"/>
 </figure>


<div class="modal-body">
         <img ng-src="{{ImageName}}" id="imagepreview">
 </div>

Angular 脚本

$("#imagemodal").on("shown.bs.modal", function (event) {

     var imgName= $(event.relatedTarget).data('imgname');
     $scope.ImageName = "Path here...."+ imageName;
});