Separate scope variablesin angular

Question

I have one scope variables for four elements in div. When I change the variable it affects all the four elements within which it is included. I am beginner in angular js and can't handle it alone.

Here is an example to explain better:

JS:

/* controller-home.js ********************************************************/
app.controller("homeController", function($scope, $http, $state) {
    $scope.heading = "SWITCHES";
    $scope.button1 = "Хол"
    $scope.button2 = "Кухня"
    $scope.button3 = "Баня"
    $scope.button4 = "Балкон"
    $scope.imageSrc = "LitLamp.png";


    $scope.onOf = function() {
        console.log("Switched");
        if ($scope.imageSrc === "LitLamp.png") {
            $scope.imageSrc = "NotLit.png";
        }


    }
})

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

The problem is that when I hit one of the four buttons, all the images change. How to group image with button, or when I hit the first button only the image below it to change and the rest three to remain unchanged?

Don't share the model (imageSrc) between the buttons, if you want to change the imageSrc by button, you need to keep a different model for each button. — Javier Gonzalez
– Javier Gonzalez, Commented Feb 6, 2018 at 14:21

Henrique Limas · Accepted Answer · 2018-02-06 14:22:39Z

The problem here is because you are using the same variable imageSrc for all image. What you can do here is create an object for each image.

$scope.images = {
  button1: 'source.png',
  button2: 'source.png',
  button3: 'source.png',
  button4: 'source.png'
}

In the onOf method you can pass the name of the button you are changing

$scope.onOf = function(buttonName) {
  if ($scope.images[buttonName] === 'bla.png') {
    $scope.images[buttonName] = 'yay.png';
  }
}

And in the html you set the images calling each property and passing the name of the button as argument on onOf

<div style="display:inline-block;">
   <button ng-click="onOf('button1')" class="homeSwitchButton">{{button1}}</button>
   <img class="homeButtonImage" src="{{images.button1}}" alt="Lamp" >
</div>

Better approach: You can put the buttons as an array and use ng-repeat

$scope.buttons = [{ name: 'bla', image: 'yay.png'}]

$scope.onOf = function(button) {
  if (button.image === 'yay') {
    ...
  }
}

And in the html

<div ng-repeat="button in buttons" style="display:inline-block;">
   <button ng-click="onOf(button)" class="homeSwitchButton">{{button.name}}</button>
   <img class="homeButtonImage" src="{{button.image}}" alt="Lamp" >
</div>

Collectives™ on Stack Overflow

Separate scope variablesin angular

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