Question

我在div中有四个元素的一个范围变量。当我更改变量时，它会影响包含它的所有四个元素。我是角度js的初学者，不能单独处理它。

这是一个更好解释的例子：

JS：

SQL> show parameter SEC_CASE_SENSITIVE_LOGON

NAME                                 TYPE        VALUE
------------------------------------ ----------- ------------------------------
sec_case_sensitive_logon             boolean     TRUE



SQL> ALTER SYSTEM SET SEC_CASE_SENSITIVE_LOGON = FALSE;

System altered.


-------Restarted the database---------------------------

SQL> ALTER SYSTEM SET SEC_CASE_SENSITIVE_LOGON = FALSE;

System altered.

HTML：

/* 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";
        }


    }
})

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

Answer 1

这里的问题是因为您对所有图像使用相同的变量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>

更好的方法：您可以将按钮设置为数组并使用ng-repeat

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

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

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

角度分开范围变量

1 个答案: