Javascript 角度上的分离范围变量

我有一个作用域变量用于div中的四个元素。当我更改变量时，它会影响包含它的所有四个元素。我是angular js的初学者，无法单独处理

下面是一个更好地解释的示例：

JS:

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>

开关
{{button1}}
{{button2}}
{{button3}}
{{button4}}

---

问题是当我按下四个按钮中的一个时，所有的图像都会改变。如何使用按钮对图像进行分组，或者当我按下第一个按钮时，只更改其下方的图像，其余三个保持不变？

这里的问题是，您对所有图像使用相同的变量

imageSrc

。这里可以做的是为每个图像创建一个对象

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

在

onOf

方法中，您可以传递要更改的按钮的名称

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

在html中，您将图像设置为调用每个属性，并将按钮名称作为参数传递给

onOf

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

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

{{button.name}

这里的问题是因为您对所有图像使用相同的变量

imageSrc

。这里可以做的是为每个图像创建一个对象

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

在

onOf

方法中，您可以传递要更改的按钮的名称

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

在html中，您将图像设置为调用每个属性，并将按钮名称作为参数传递给

onOf

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

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

{{button.name}

不要在按钮之间共享模型（

imageSrc

），如果要按按钮更改

imageSrc

，则需要为每个按钮保留不同的模型。如果要按按钮更改

imageSrc

，请不要在按钮之间共享模型（

imageSrc

），您需要为每个按钮保留不同的型号。