Struggling with one scope variable affecting multiple elements in a div in AngularJS. Looking for help as a beginner in handling this issue.
For a clearer understanding, here's an example:
JS:
/* controller-home.js ********************************************************/
app.controller("homeController", function($scope, $http, $state) {
$scope.heading = "SWITCHES";
$scope.button1 = "Living Room"
$scope.button2 = "Kitchen"
$scope.button3 = "Bathroom"
$scope.button4 = "Balcony"
$scope.imageSrc = "LitLamp.png";
$scope.onOf = function() {
console.log("Switched");
if ($scope.imageSrc === "LitLamp.png") {
$scope.imageSrc = "NotLit.png";
}
}
})
HTML:
<div style="text-align: center;">
<h1 >SWITCHES</h1>
<div ng-controller="homeController">
<div style="display:inline-block;">
<button ng-click="onOf()" class="homeSwitchButton">{{button1}}</button>
<img class="homeButtonImage" src="{{imageSrc}}" alt="Lamp" >
</div>
<div style="display:inline-block;">
<button ng-click="onOf()" class="homeSwitchButton">{{button2}}</button>
<img class="homeButtonImage" src="{{imageSrc}}" alt="Lamp" >
</div>
<div style="display:inline-block;">
<button ng-click="onOf()" class="homeSwitchButton">{{button3}}</button>
<img class="homeButtonImage" src="{{imageSrc}}" alt="Lamp" >
</div>
<div style="display:inline-block;">
<button ng-click="onOf()" class="homeSwitchButton">{{button4}}</button>
<img class="homeButtonImage" src="{{imageSrc}}" alt="Lamp" >
</div>
</div>
</div>
Facing the issue where all images change when clicking any button. Seeking a solution to only change the image below the clicked button and keep the rest unchanged.