Multiple buttons running wrong function

I have an issue where I have three buttons which I want to run 3 separate functions, but no matter which one I click, only one function is run. See example code below

CONTROLLER FUNCTIONS

.controller('issues', ['$scope', '$state', '$cordovaCamera', 'localStorage', 'postData', function($scope, $state, $cordovaCamera, localStorage, postData) {  

$scope.removeImageOne = function(e) {
    if($scope.issueImageTwo){
      console.log('pic present');
      console.log(e);
      $scope.issueImageOne = $scope.issueImageTwo;
      if($scope.issueImageThree){
        $scope.issueImageTwo = $scope.issueImageThree;
        $scope.issueImageThree = null;
      }else{
        $scope.issueImageTwo = null;
      }
    }else{
      console.log('pic not here');
      $scope.issueImageOne = null;
    }
  };

  $scope.removeImageTwo = function() {
    console.log('two');
    if($scope.issueImageThree){
      $scope.issueImageTwo = $scope.issueImageThree;
      $scope.issueImageThree = null;
    }else{
      $scope.issueImageTwo = null;
    } 
  };

  $scope.removeImageThree = function() {
    console.log('three');
    $scope.issueImageThree = null;
  };

and here is the HTML code. You will see that each ng-click directive is pointing to a different function in my controller, yet all of them seem to run $scope.removeImageOne();

HTML TEMPLATE

<ion-content padding="true" ng-controller="issues">
    <label class="item item-input item-select">
	    <select>
	      <option disabled selected>Select Issue Type...</option>
	      <option>Type 1</option>
	    </select>
  	</label>
  	<label class="item item-input item-select">
	    <select>
	      <option disabled selected>Select Issue Sub Category...</option>
	      <option>Category 1</option>
	    </select>
  	</label>
  	<label class="item item-input item-textarea">
	    <textarea rows="5" placeholder="Describe Your Issue..."></textarea>
  	</label>
    <label class="item">
      <div class="issue-image issue-image-one" ng-show="issueImageOne">
        <img src="{{issueImageOne}}">
        <button type="button" ng-click="removeImageOne($event);" class="imageOne button icon ion-close instore-close"></button>
      </div>
      <div class="issue-image issue-image-two" ng-show="issueImageTwo">
        <img src="{{issueImageTwo}}">
        <button type="button" ng-click="removeImageTwo();" class="imageTwo button icon ion-close instore-close"></button>
      </div>
      <div class="issue-image issue-image-three" ng-show="issueImageThree">
        <img src="{{issueImageThree}}">
        <button type="button" ng-click="removeImageThree();" class="imageThree button icon ion-close instore-close"></button>
      </div>
    </label>

Any help is greatly appreciated!

I’m confused on what you’re trying to accomplish. You’re moving the images up in number when one is removed, if you remove the top image it is calling the removeImageOne because that is the div that is showing on the top (since you shifted everything upwards). If you inspect element on the close button’s you can see that each one is a separate function and is being called accordingly, until you remove the top one and the second image shifts to the first spot and the third shifts to the second.

Basically your ng-show for the first div <div class="issue-image issue-image-one" ng-show="issueImageOne"> is still shown when you remove the first image because the second image is assigned to “issueImageOne”. I threw your code in a codepen, if you could explain what you’re trying to do, that would help :smile:

codepen

Can you please provide a codepen

Thanks @brandyshea,

I have 3 images on a page, and as one is removed I bump the images up the list so that the first slots in the list always contain the images and the empty slots are at the end. The issue I am experiencing here is before any images are deleted, if you delete image 3, image 1 will dissapear and image 3 will remain.

Somehow even though each delete button points to its own function, all 3 of them delete the first image, and not the image they are next to eg if you delete image 3, image1 gets removed and 3 is pushed to slot 2.

I hope that may make more sence.

PS Thanks for adding a codepen

I don’t see that happening in the codepen I attached. If I click the X on the third (bottom) image it is erasing the third one. If you start at the top and remove the first one (each time) it will continuously call the remove image one function because you are shifting them up. Sorry if I’m missing something.

Hi Brandyshea,
I can now see that this code does work in the codepen, yet it fails in my app. Sorry for any confusion.
Ive comapred my code against this codepen and cannot see any differences so am stumped as to what it could be.

Cheers for your help

In case you haven’t figured it out, I apparently changed the labels to divs when I was messing around with it (because I’ve ran into problems with labels interfering with ng-click’s a lot) and that is what is different in my codepen.

So change this label that wraps all of the images to a div:

<label class="item">
1 Like

Thanks so much @brandyshea!
I couldnt for the life of me figure out why this was happening but your resolution here has in fact fixed the issue.

Thanks again!

1 Like

You’re welcome. It’s a really weird issue but I’ve been bitten by it multiple times. I think I stopped using labels because of it. :slight_smile:

1 Like