Angularjs toggle image onclick

angularjs

Solution

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.

Problem

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?

Original source