Angularjs toggle image onclick
Solution 1
What you want is a new scope for each followrow
. As your code stands, there's only one scope that all of the followrow
s are referencing.
A simple answer is to create a new controller that you attach to each followrow
:
<div class="followrow" ng-controller="ImageToggleCtrl">...</div>
And then move the image toggling logic to that new controller:
app.controller('ImageToggleCtrl', function($scope) {
$scope.followBtnImgUrl = '/img1';
$scope.toggleImage = function() { /* the toggling logic */ };
});
Now, a new scope will be instantiated for each row, and the images will toggle independently.
Solution 2
<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;
}
};
});
Related videos on Youtube
user1071182
Updated on July 09, 2022Comments
-
user1071182 almost 2 years
I'm trying to toggle a button image when a user clicks it. I prefer to use angularjs instead of jquery if possible. Right now I have a working version which toggles the image when clicked, the only problem is it changes ALL the images on click. How do I reduce the scope or pass in the src attribute for the img element?
<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'; } } });
Can I pass in the img src attribute the function like toggleImage(this.img.src) or similar?
-
Umur Kontacı about 11 yearsYou do not need to create a new controller at all, it is a very simple case well handled by angularjs. Angularjs creates a new scope for each item in ng-repeat. You can store the image url in the object and change it accordingly.
-
satchmorun about 11 yearsThis is another valid way to do it. Be sure to reference the
merchant
in theng-click="toggleImage(merchant)
call. -
usersam over 6 years@Umur Kontacı , could you please elaborate with some example.