CODEWITHSUNDEEP
angularjsbootstrap-modalimage-gallery
Uladz Kha
Uladz Kha

Reputation: 2364

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

i have simple AngularJS application, i'm trying display images in modal use bootstrap, all photos at page i'm displaying use ng-repeat directive:

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

and i have the code of modal:

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

Tell me please, how i can use it both ng-repeat and modal ? Thanks for your answers !

Upvotes: 1

Views: 1347

Answers (1)

Jorawar Singh
Jorawar Singh

Reputation: 7621

Just move your first code where you have ng-repeat in modal and you should be able to show your images there.

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

Upvotes: 2

Related Questions