Angularjs切换图像onclick

我想切换一个按钮图像，当用户点击它。如果可能，我倾向于使用angularjs而不是jquery。现在我有一个工作版本，当点击时切换图片，唯一的问题是它改变了点击的所有图片。如何减少范围或传递img元素的src属性？Angularjs切换图像onclick

<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）或类似的函数吗？

来源

2013-02-14 user1071182

你想要的是每个followrow的新范围。正如你的代码所代表的那样，只有一个范围是所有的followrow都是引用的。

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

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

然后将图像切换逻辑到新的控制器：

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

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

来源

2013-02-14 23:24:05 satchmorun

您不必再创建一个新的控制器，这是一个非常简单的情况下，通过angularjs处理得很好。 Angularjs为每个ng-repeat项目创建一个新的范围。您可以将图像url存储在对象中并相应地进行更改。 – 2013-02-15 07:00:48

@UmurKontacı，请你详细说明一些例子。 – sand 2017-12-25 17:55:23

我已经拥有。在下面看到我的回答 – 2018-01-02 06:00:40

<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; 
     } 
    }; 
});

来源

2013-02-15 06:58:20

这是另一种有效的方法。请务必在'ng-click =“toggleImage（商家）'电话中引用'merchant'。 – satchmorun 2013-02-15 07:03:46

是的，我忘了，谢谢。 – 2013-02-15 07:23:13

拼写错误merchhants – virtual82 2013-07-18 05:46:19

我只是增加了两个可点击图片：

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

他们切换eachothers知名度。在页面加载一个是可见的，一个也没有了，都可以点击图像调用相同的功能：

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

来源

2016-04-04 07:58:21

Angularjs切换图像onclick

回答

相关问题