Question

我试图在点击项目时切换图像。但问题是当我点击一个元素时，它也会改变其他元素。我无法弄清楚如何处理这种情况。

我的HTML代码是，

<div id="TestContainer" class="TestContainer">
     <li ng-repeat="x in testdata.children">
        <img class=opcl ng-src={{PlusMinusImage}} ng-click=ShowHideFunc()></img>
        <img class=testcat ng-src={{myImage}}></img>
        <span>{{x.TagName}}</span>
    </li> 
</div>

控制器中的代码是，

$scope.PlusMinusImage = '../Images/Plus15.png';
        $scope.myImage = '../Images/image.png' ;
        $scope.ShowHideFunc = function() {
            console.log("in function ShowHideFunc");    
                console.log(this)
            if ($scope.PlusMinusImage === '../Images/Plus15.png') {
                $scope.PlusMinusImage = '../Images/Minus15.png';
            } else {
                $scope.PlusMinusImage = '../Images/Plus15.png';
            }           
            //event.stopImmediatePropagation();         
      };

请帮忙。

提前感谢。

Answer 1

我建议管理testdata.children数组中的图片密钥。例如

$scope.PlusImage = '../Images/Plus15.png';
$scope.MinusImage = '../Images/Minus15.png';

$scope.testdata = {
    children: [{
        tagname: "x",
        img: $scople.PlusImage 
    },
    {
        tagname:"y",
        img: $scope.PlusImage 
    }]
}

像这样准备子数组然后在你的html中添加跟踪$ index并将索引传递给你的点击功能

``<li ng-repeat="x in testdata.children track by $index">
        <img class=opcl ng-src={{x.img}} ng-click=ShowHideFunc($index)></img>
        <img class=testcat ng-src={{myImage}}></img>
        <span>{{x.TagName}}</span>
    </li>``

在您的点击功能

中

$scope.ShowHideFunc = function(index) {       
    if ($scope.testdata.children[index].img === $scope.PlusImage) {
        $scope.testdata.children[index].img = $scope.MinusImage;
    } else {
        $scope.testdata.children[index].img = $scope.PlusImage;
    }

};

angularjs如何在点击时切换图像

1 个答案: