AngularJs：使用 ng-click 兩次單擊時顯示元素

Question

假設如果我想在單擊 image1 上顯示 image2，如何在 angularjs 中執行此操作。我嘗試使用 ng-click 兩次，但它不起作用。

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

在這里，我使用了兩個 function 進行 ng-click。

Answer 1

您可以簡單地使用 ng-show 和 ng-hide

檢查我的代碼

 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>

Answer 2

你不能在同一個項目上有兩個點擊事件。 您可以添加一個切換來顯示和隱藏基於單擊如下所示的圖像

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
}

AngularJs：使用 ng-click 兩次單擊時顯示元素

問題描述

2 個解決方案

解決方案1
1 2019-11-20 12:45:09

解決方案2
0 2019-11-20 12:35:00

AngularJs：使用 ng-click 兩次單擊時顯示元素

問題描述

2 個解決方案

解決方案1 1 2019-11-20 12:45:09

解決方案2 0 2019-11-20 12:35:00

解決方案1
1 2019-11-20 12:45:09

解決方案2
0 2019-11-20 12:35:00