Dynamicaly changing images with Bootstrap 5 and AngularJS-CodePudding

The

The issue: ( It displays all the images from the loop )

PS.: The reason I am using AngularJS - This is an older project, so I have no choice.

If my question is not understandable please ask, or tell me how could I explain it better. I am always open to constructive critics.

CodePudding user response：

You should probably dynamic change the src of the image inside modal.

With something similar to this:

$('#modal').on('show.bs.modal', function (e) { // the clicked element is available as the relatedTarget property of the event var src = $(e.relatedTarget).attr('src'); $(this).find('.modal-body > img').attr('src', src); });

this is JQuery btw, found at another post

Or you could use some lightbox library like fslightbox. I would use a library because besides the dynamic changing, it handles a lot more features as full screen, gallery if needed, and more.

CodePudding user response：

Your idea of using dynamically changing id is already correct.

Here, I only copy pasted your code, put your modal inside your loop, add dynamic index to the id and data-bs-target of docImgModal.

And it works!

<div ng-show="docImg.length>0"> <div > <div > <a href="#attachments" data-bs-toggle="tooltip" tooltip title="See all images">@Global.Images</a> <i ></i> </div> <div > <div > <div ng-repeat="(idx, a) in docImg" > <div id="img{{idx}}" > <img ng-src="{{a}}" data-bs-toggle="modal" data-bs-target="#docImgModal{{idx}}"/> </div> <div id="docImgModal{{idx}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div > <div > <div > <h5 id="exampleModalLabel">Modal title</h5> <button type="button" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div > <img ng-src="{{a}}"> </div> <div > <button type="button" data-bs-dismiss="modal">Close</button> <button type="button" >Save changes</button> </div> </div> </div> </div> </div> </div> </div> </div> </div>