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>

在这里，我对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控制器

$scope.showImage = false;

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

AngularJs：使用ng-click两次单击时显示元素

2 个答案: