Develop Reference

Dynamicaly changing images with Bootstrap 5 and AngularJS

I created the following array that contains images with angularJS:
$scope.docImg = [
'../../Content/Image/BackGrounds/abra.png',
'../../Content/Image/BackGrounds/background_black.jpg',
'../../Content/Image/BackGrounds/halloween.jpg',
'../../Content/Image/BackGrounds/registration.jpg',
]
I displayed them by using ng-repeat and Bootstrap 5
<div class="#colmode mh-100 mt-4" ng-show="docImg.length>0">
<div class="card bg-dark h-100 border-eniac">
<div class="card-header bg-eniac d-flex justify-content-between">
#Global.Images
<i class="fas fa-file"></i>
</div>
<div class="card-body container">
<div class="row col-12">
<div ng-repeat="a in docImg" class="col-4">
<div id="{{a.Id}}" class="img-container">
<img ng-src="{{a}}" class="img-fluid" data-bs-toggle="modal" data-bs-target="#docImgModal"/>
</div>
</div>
</div>
</div>
</div>
</div>
These are small images, but I want to display them in large size too and I thought I am going to use Modals for this purpose.
So I want to create a bootstrap modal that displays the clicked and only the clicked image, and this is where I got stuck: I can display the images if I put the modal in the loop, but then obviously it displays all the images at the same time, which I don't want.
Modal that doesn't work well:
<div class="modal fade" id="docImgModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<img ng-src="{{a}}">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
What I want to do: Create a Modal or a function that takes and displays only the image that I clicked on. Maybe using a dynamically changing id, but I am open to other ideas too.
The images in the loop:
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.

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 class="#colmode mh-100 mt-4" ng-show="docImg.length>0">
<div class="card bg-dark h-100 border-eniac">
<div class="card-header bg-eniac d-flex justify-content-between">
#Global.Images
<i class="fas fa-file"></i>
</div>
<div class="card-body container">
<div class="row col-12">
<div ng-repeat="(idx, a) in docImg" class="col-4">
<div id="img{{idx}}" class="img-container">
<img ng-src="{{a}}" class="img-fluid h-50" data-bs-toggle="modal" data-bs-target="#docImgModal{{idx}}"/>
</div>
<div class="modal fade" id="docImgModal{{idx}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<img ng-src="{{a}}">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

You should probably dynamic change the src of the image inside the 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 such as full screen, gallery if needed, and more.

I added the features you needed, you may change it to make it more suitable!
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.docImg = [
'https://docs.juliahub.com/TestImages/cMlD2/1.6.1/thumbnails/airplaneF16.png',
'https://docs.juliahub.com/TestImages/cMlD2/1.6.1/thumbnails/barbara_color.png',
'https://docs.juliahub.com/TestImages/cMlD2/1.6.1/thumbnails/chelsea.png',
'https://docs.juliahub.com/TestImages/cMlD2/1.6.1/thumbnails/coffee.png',
]
});
const exampleModal = document.getElementById('docImgModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
const imgElement = event.relatedTarget
const imgSrc = imgElement.getAttribute('src')
const modalImgElement = exampleModal.querySelector('#modal-img')
modalImgElement.src = imgSrc
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div ng-app="myApp" ng-controller="myCtrl">
<div class="#colmode mh-100 mt-4" ng-show="docImg.length>0">
<div class="card bg-dark h-100 border-eniac">
<div class="card-header bg-eniac d-flex justify-content-between">
#Global.Images
<i class="fas fa-file"></i>
</div>
<div class="card-body container">
<div class="row col-12">
<div ng-repeat="a in docImg" class="col-4">
<div id="{{a.Id}}" class="img-container">
<img ng-src="{{a}}" class="img-fluid" data-bs-toggle="modal" data-bs-target="#docImgModal"/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="docImgModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<img id="modal-img" src="">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Hide show different divs and show all with button

I have 4 divs that each have a button , when a button on div is clicked it should hide that div. Then there is button at top called show all which will show all hidden divs again below is all the code show button , JS script and the four div boxes which should hide when button clicked on them and show all boxes again when show button is clicked
<button type="button" class="btn btn-light btn-sm mt-3" id="show"><i class="fe fe-eye"></i> Show all</button>
<script type = "text/javascript" >
function show(elementId) {
document.getElementById("id1").style.display = "none";
document.getElementById("id2").style.display = "none";
document.getElementById("id3").style.display = "none";
document.getElementById("id4").style.display = "none";
document.getElementById(elementId).style.display = "block";
}
</script>
<div class="card project-card" id="id1">
<div class="card-header">
Bookmarks</strong>
<button type="button" class="btn btn-light btn-sm ml-3" onclick="show('id2');"><i class="fe fe-eye"></i></button>
</div>
<div class="card-body">
body text here
</div>
</div>
<div class="card project-card" id="id2">
<div class="card-header">
Bookmarks</strong>
<button type="button" class="btn btn-light btn-sm ml-3" onclick="show('id2');"><i class="fe fe-eye"></i></button>
</div>
<div class="card-body">
body text here
</div>
</div>
<div class="card project-card" id="id3">
<div class="card-header">
Bookmarks</strong>
<button type="button" class="btn btn-light btn-sm ml-3" onclick="show('id2');"><i class="fe fe-eye"></i></button>
</div>
<div class="card-body">
body text here
</div>
</div>
<div class="card project-card" id="id4">
<div class="card-header">
Bookmarks</strong>
<button type="button" class="btn btn-light btn-sm ml-3" onclick="show('id2');"><i class="fe fe-eye"></i></button>
</div>
<div class="card-body">
body text here
</div>
</div>

Simply set div's display to either block or none to hide it.
let show = document.getElementById('show-button');
let divs = document.getElementsByName('container');
let hideButtons = document.getElementsByName('hide-button');
show.onclick = () => {
divs.forEach((d) => d.style.display='block');
}
hideButtons.forEach((b) => {
b.style.display='block';
b.onclick = () => b.parentNode.style.display='none';
});
<button id='show-button'>Show</button>
<div name='container'>
<button name='hide-button'>Hide 1</button>
</div>
<div name=container>
<button name='hide-button'>Hide 2</button>
</div>
<div name=container>
<button name='hide-button'>Hide 3</button>
</div>
<div name=container>
<button name='hide-button'>Hide 4</button>
</div>

Jquery Repeater, how to make the 'create button' at the bottom?

I understand that the data-repeater-create="" must be inside the id="left_repeater", otherwise it will not function as a create button. Is there a way that the button will function outside the id="left_repeater" or id="right_repeater"?
My goal is when I click add left button, it will only create the left input and vise versa for the add right button. Both of the button is at the very bottom.
JS fiddle link to see the codes
$('#left_repeater').repeater({
show: function() {
$(this).slideDown();
},
});
$('#right_repeater').repeater({
show: function() {
$(this).slideDown();
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.min.js"></script>
<div id="left_repeater">
<div data-repeater-list="left_items">
<div data-repeater-item>
<div class="row">
<div class="col-6">
<input type="text" name="name" class="form-control form-control-sm m-input" placeholder="left">
</div>
<div class="col-6">
</div>
</div>
</div>
</div>
<!-- <div data-repeater-create="" class="btn btn-sm btn-success">
<span><i class="la la-plus"></i><span>Add</span></span>
</div> -->
</div>
<div id="right_repeater">
<div data-repeater-list="right_items">
<div data-repeater-item>
<div class="row">
<div class="col-6">
</div>
<div class="col-6">
<input type="text" name="name" class="form-control form-control-sm m-input" placeholder="right">
</div>
</div>
</div>
</div>
<div data-repeater-create="" class="btn btn-sm btn-success">
<span><i class="la la-plus"></i><span>Add</span></span>
</div>
</div>
<div class="row">
<div class="col-6 text-center">
<div data-repeater-create="" class="btn btn-sm btn-success">
<span><i class="la la-plus"></i><span>Add Left</span></span>
</div>
</div>
<div class="col-6 text-center">
<div data-repeater-create="" class="btn btn-sm btn-success">
<span><i class="la la-plus"></i><span>Add Right</span></span>
</div>
</div>
</div>

Place the #left_repeater inside div container.
<div class="container">
<div id="left_repeater">
.....
</div>
</div>
add CSS style to this
.container {
display: flex;
}
https://jsfiddle.net/y1bpot5n//

Text does not appear on buttons

I'm trying to create four buttons where four labels appear in a random order:
<div class="row text-center center-block">
<button class="quizChoice btn btn-md btn-info" id="quizChoice0"></button>
</div>
<div class="row text-center center-block">
<button class="quizChoice btn btn-md btn-info" id="quizChoice1"></button>
</div>
<div class="row text-center center-block">
<button class="quizChoice btn btn-md btn-info" id="quizChoice2"></button>
</div>
<div class="row text-center center-block">
<button class="quizChoice btn btn-md btn-info" id="quizChoice3"></button>
</div>
The labels are stored under the
var choiceLabels = ["Hola", "Hole", "Holo", "Holu"];
Then the code iterates through the choices to stick them in the buttons:
for (var i=0; i<choiceLabels; i++) {
var theID="#quizChoice"+i.toString();
$(theID).text(choiceLabels[i])
};
But the text does not appear on the buttons - they stay empty.
Anybody know why?

Your error is here: i<choiceLabels. choiceLabels is an array, so you have to do i<choiceLabels.length.
var choiceLabels = ["Hola", "Hole", "Holo", "Holu"];
for (var i=0; i<choiceLabels.length; i++) {
var theID="#quizChoice"+i.toString();
$(theID).text(choiceLabels[i])
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row text-center center-block">
<button class="quizChoice btn btn-md btn-info" id="quizChoice0"></button>
</div>
<div class="row text-center center-block">
<button class="quizChoice btn btn-md btn-info" id="quizChoice1"></button>
</div>
<div class="row text-center center-block">
<button class="quizChoice btn btn-md btn-info" id="quizChoice2"></button>
</div>
<div class="row text-center center-block">
<button class="quizChoice btn btn-md btn-info" id="quizChoice3"></button>
</div>

You are missing the length value in choiceLabels. The iteration should loop through choiceLabels.length:
var choiceLabels = ["Hola", "Hole", "Holo", "Holu"];
for (var i=0; i<choiceLabels.length; i++) {
var theID="#quizChoice"+i.toString();
$(theID).text(choiceLabels[i])
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row text-center center-block">
<button class="quizChoice btn btn-md btn-info" id="quizChoice0"></button>
</div>
<div class="row text-center center-block">
<button class="quizChoice btn btn-md btn-info" id="quizChoice1"></button>
</div>
<div class="row text-center center-block">
<button class="quizChoice btn btn-md btn-info" id="quizChoice2"></button>
</div>
<div class="row text-center center-block">
<button class="quizChoice btn btn-md btn-info" id="quizChoice3"></button>
</div>

AngularJS UI - On click of button collapse single div if multiple divs present

Suppose I have the following code:
<button class="btn btn-primary" ng-click="isCollapsed = !isCollapsed">Button1</button>
<div id="collapse1" collapse="isCollapsed">
<div class="well well-small">
<p ng-bind-html="b2data"></p>
</div>
</div>
<button class="btn btn-primary" ng-click="isCollapsed = !isCollapsed">Button2</button>
<div id="collapse2" collapse="isCollapsed">
<div class="well well-small">
<p ng-bind-html="b2data"></p>
</div>
</div>
How can I collapse each individually?
http://plnkr.co/edit/W26X4Iq8KrnY9cGsFvwA?p=preview

Try this out:- http://plnkr.co/edit/vPbihuL6JBE6qhwy4irP?p=preview
HTML:-
<div ng-controller="AccordionDemoCtrl">
<accordion-group heading="Static Header">
<button class="btn btn-primary" ng-click="isCollapsed1= !isCollapsed1">Button1</button>
<hr>
<div id="collapse2" collapse="isCollapsed1">
<div class="well well-small">
<p ng-bind-html="b2data"></p>
</div>
</div>
<button class="btn btn-primary" ng-click="isCollapsed2 = !isCollapsed2">Button2</button>
<hr>
<div id="collapse2" collapse="isCollapsed2">
<div class="well well-small">
<p ng-bind-html="b2data"></p>
</div>
</div>
</accordion-group>
</div>