从 Angular ng-repeat 单击时将图像动态添加到 Bootstrap 模态答案

【问题标题】：Dynamically Adding Image into Bootstrap Modal on click from Angular ng-repeat从 Angular ng-repeat 单击时将图像动态添加到 Bootstrap 模态
【发布时间】：2016-09-28 13:55:15
【问题描述】：

我有一个照片页面，我想让用户单击该页面以将该特定图像放大为引导模式。如何在单击时将每个特定图像动态添加到模式中。我的 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

【问题讨论】：

发布showModal函数

标签： javascript jquery html angularjs twitter-bootstrap

【解决方案1】：

角度脚本

  $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>

角度脚本

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

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

【讨论】：