Angularjs切换图像onclick答案

【问题标题】：Angularjs toggle image onclickAngularjs切换图像onclick
【发布时间】：2013-01-30 21:39:17
【问题描述】：

我试图在用户单击按钮图像时切换它。如果可能的话，我更喜欢使用 angularjs 而不是 jquery。现在我有一个工作版本，可以在单击时切换图像，唯一的问题是它会在单击时更改所有图像。如何缩小范围或传入 img 元素的 src 属性？

    <div ng-repeat="merchant in merchants">
      <div class="followrow">
        <a ng-click="toggleImage()"><img id="followbutton" ng-src="{{followBtnImgUrl}}"  /></a>
      </div>
    </div>

app.controller('FollowCtrl', function CouponCtrl($scope) {
    $scope.followBtnImgUrl = '/img1'


    $scope.toggleImage = function () {
        if ($scope.followBtnImgUrl === '/img1.jpg') {
            $scope.followBtnImgUrl = baseUrl + '/img2.jpg';
        } else {
            $scope.followBtnImgUrl = 'img1.jpg';
        }
    }
});

我可以在img src 属性中传递toggleImage(this.img.src) 之类的函数吗？

【问题讨论】：

标签： angularjs

【解决方案1】：

<div ng-repeat="merchant in merchants">
  <div class="followrow">
    <a ng-click="toggleImage(merchant)"><img id="followbutton" ng-src="{{merchant.imgUrl}}"  />
    </a>
  </div>
</div>

app.controller('FollowCtrl', function CouponCtrl($scope) {
    $scope.followBtnImgUrl = '/sth.jpg'
    $scope.merchants = [{imgUrl: "img1.jpg", name:"sdf"}, 
                         {imgUrl: "img2.jpg", name: "dfsd"}];


     $scope.toggleImage = function(merchant) {
         if(merchant.imgUrl === $scope.followBtnImgUrl) {
             merchant.imgUrl = merchant.$backupUrl;
         } else {
             merchant.$backupUrl = merchant.imgUrl;
             merchant.imgUrl = $scope.followBtnImgUrl;
         }
    };
});

【讨论】：

这是另一种有效的方法。请务必在 ng-click="toggleImage(merchant) 调用中引用 merchant。

【解决方案2】：

您想要的是每个followrow 的新范围。就您的代码而言，所有followrows 都只引用一个范围。

一个简单的答案是创建一个附加到每个followrow 的新控制器：

<div class="followrow" ng-controller="ImageToggleCtrl">...</div>

然后将图像切换逻辑移至该新控制器：

app.controller('ImageToggleCtrl', function($scope) {
  $scope.followBtnImgUrl = '/img1';
  $scope.toggleImage = function() { /* the toggling logic */ };
});

现在，将为每一行实例化一个新范围，并且图像将独立切换。

【讨论】：

你根本不需要创建一个新的控制器，这是一个非常简单的案例，由 angularjs 处理得很好。 Angularjs 为 ng-repeat 中的每个项目创建一个新范围。您可以将图像 url 存储在对象中并进行相应更改。
@Umur Kontacı，您能否举个例子详细说明一下。

【解决方案3】：

我刚刚添加了两个可点击的图片：

<div ng-app="FormApp" ng-controller="myController" max-width="1150px;" width="1150px;" >
    <input ng-show="ShowDown" type="image" style="width:250px; height:40px;" src="~/Content/Images/contactShow.png" ng-click="ShowHide()"/>
    <input ng-show="ShowUp" type="image" style="width:250px; height:40px;" src="~/Content/Images/contactHide.png" ng-click="ShowHide()" />
</div>

他们切换彼此的可见性。在页面加载时，一个可见，一个不可见，两个可点击的图像调用相同的函数：

<script type="text/javascript">
    var app = angular.module('FormApp', [])
    app.controller('myController', function ($scope) {
        $scope.ShowDown = true;
        $scope.ShowUp = false;

        $scope.ShowHide = function () {
            $scope.ShowDown = $scope.ShowDown ? false : true;
            $scope.ShowUp = $scope.ShowUp ? false : true;
        }
    });
</script>

【讨论】：