Angularjs toggle image onclick

Question

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ı · Accepted Answer · 2013-07-18 15:51:28Z

5

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

edited Jul 18, 2013 at 15:51

answered Feb 15, 2013 at 6:58

Umur Kontacı

35.5k8 gold badges76 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

satchmorun Over a year ago

This is another valid way to do it. Be sure to reference the merchant in the ng-click="toggleImage(merchant) call.

satchmorun · Accepted Answer · 2013-02-14 23:24:05Z

4

What you want is a new scope for each followrow. As your code stands, there's only one scope that all of the followrows 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.

answered Feb 14, 2013 at 23:24

satchmorun

12.5k2 gold badges43 silver badges27 bronze badges

2 Comments

Umur Kontacı Over a year ago

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

usersam Over a year ago

@Umur Kontacı , could you please elaborate with some example.

Mikael Puusaari · Accepted Answer · 2016-04-04 07:58:21Z

I just added two clickable images:

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

They toggle eachothers visibility. At page load one is visible, one is not, and both clickable images call the same function:

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

Collectives™ on Stack Overflow

Angularjs toggle image onclick

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related