Dynamically Adding Image into Bootstrap Modal on click from Angular ng-repeat

Question

I have a page of photos where I want to allow the user to click to enlarge that specific image into a bootstrap modal. How can I dynamically add each specific image to the modal on click..my html looks like this:

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

I was thinking I would call a function that would pass in the name of the image and then add that to the modal but doesn't seem to work. Does that seem to be the best way to go about it? Ideally, I would prefer to get a look similar to what it looks like when you click on the image in this link:

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

post the showModal function

madalinivascu
– madalinivascu

2016-09-28 05:28:29 +00:00
Commented Sep 28, 2016 at 5:28 — madalinivascu
– madalinivascu, Commented Sep 28, 2016 at 5:28

Anil Panwar · Accepted Answer · 2016-09-28 05:55:15Z

Angular script

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

--------------------------------------or-------------------------------------

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 script

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

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

Collectives™ on Stack Overflow

Dynamically Adding Image into Bootstrap Modal on click from Angular ng-repeat

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related