gpt4 book ai didi

javascript - AngularJs:使用 ng-click 两次显示点击元素

转载 作者:行者123 更新时间:2023-12-02 22:29:36 27 4
gpt4 key购买 nike

假设我想在点击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 的两个函数。

最佳答案

您可以简单地使用 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>

关于javascript - AngularJs:使用 ng-click 两次显示点击元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58954265/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com