AngularJs: Show element on click using ng-click twice

Question

Suppose if i want to show image2 on click image1, how to do that in angularjs.I have tried using ng-click twice, but it does not work.

<div class="image-container" ng-if="item.image_url != ''">
  <img ng-src="{{API_URL+item.image_url}}"
      ng-click="templatesCtrl.showPrediction1($event,item1)"
      ng-click="templatesCtrl.showPrediction2($event,item2)"
      alt="cax-image">

  <div class="show-me" style="display: none;">
      <img ng-src="{{API_URL+item.image_url}}" />
  </div>

Here i used two function for ng-click .

can you try this : ng-click="templatesCtrl.showPrediction1($event,item1);templatesCtrl.showPrediction2($event,item2)" — Ahmet Amasyalı
– Ahmet Amasyalı, Commented Nov 20, 2019 at 13:22

georgeawg · Accepted Answer · 2019-11-20 22:12:31Z

You can simply use ng-show and ng-hide

check my code

var app = angular.module('myApp', []);
app.controller('customersCtrl', function() {
  var self = this;
  self.show_img1 = false;
  self.changeImg = function(ev){
    self.show_img1 = !self.show_img1;
  }
});

img {
    width: 50%;
    height: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body ng-app="myApp" ng-controller="customersCtrl as cstCtrl">
    <div class="image-container">
        <div ng-hide="cstCtrl.show_img1">
            <label>Image1</label>
            <img ng-src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="cax-image" 
                 ng-click="cstCtrl.changeImg($event)">
        </div>
        <div ng-show="cstCtrl.show_img1">
            <label>Image2</label>
            <img ng-src="https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
        </div>
    </div>
</body>

MikeS · Accepted Answer · 2019-11-20 12:35:00Z

0

You cant have two click events on the same item. You could add a toggle to show and hide the image based on the click like below

HTML

<div class="image-container" ng-if="item.image_url != ''">
         <img ng-src="{{API_URL+item.image_url}}" 
            ng-click="showPrediction1()" alt="cax-image">
   <div ng-if="showImage">
     <img ng-src="{{API_URL+item.image_url}}" />
   </div>
</div>

AngularJS Controller

$scope.showImage = false;

$scope.showPrediction1 = function(){
   $scope.showImage = !$scope.showImage
}

answered Nov 20, 2019 at 12:35

MikeS

7185 silver badges19 bronze badges

Collectives™ on Stack Overflow

AngularJs: Show element on click using ng-click twice

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related