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

回答

相關問題