AngularJs: Show element on click using ng-click twice

Question

AngularJs: Show element on click using ng-click twice

66 Views Asked by John dey At 20 November 2019 at 12:21

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 .

Original Q&A

There are 2 best solutions below

**MikeS** · Answer 1 · 2019-11-20T12:35:00.257000

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
}

**Hasansab Takked** · Answer 2 · 2019-11-20T12:45:09.573000

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>

AngularJs: Show element on click using ng-click twice

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in ANGULARJS

Trending Questions

Popular # Hahtags

Popular Questions