gpt4 book ai didi

javascript - 单击同一按钮显示不同的 div - Angular JS

转载 作者:行者123 更新时间:2023-11-28 16:06:23 26 4
gpt4 key购买 nike

我有以下内容

  1. 2 个不同的 div,类名分别为灰色和黄色。
  2. 一个带有点击事件的按钮,使用 angular ng-click 绑定(bind)。

我在做什么

  1. 单击同一个按钮时,我想一次显示每个 div。例如,当我第一次点击时,我想显示黄色 div,然后在下一次点击时,我想隐藏黄色并显示灰色,依此类推。

这是我写的代码

    <!DOCTYPE html>
<html lang="en-US">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body data-ng-app="myApp">
<div data-ng-controller="myController">
<article class="grey" ng-show="showMe">Grey</article>
<article class="yellow" ng-show="showMe">Yellow</article>
<button data-ng-click="toggleMe()">Click</button>
</div>
<script>
var myApp = angular.module('myApp',[]);
myApp.controller('myController',function($scope){
$scope.showMe = false;
$scope.toggleMe = function(){
$scope.showMe = true;
}
});
</script>
<style>
.grey{width:100%;max-width:300px;height:100px;background:grey;}
.yellow{width:100%;max-width:300px;height:100px;background:yellow;}
</style>
</body>
</html>

提前致谢。

最佳答案

https://plnkr.co/edit/ORJYrkpNPVR4h8DPOuVh?p=preview

               <div data-ng-controller="myController">
<article class="grey" ng-show="showMe">Grey</article>
<article class="yellow" ng-show="!showMe">Yellow</article>
<button data-ng-click="showMe = !showMe">Click</button>
</div>
<style>
.grey{width:100%;max-width:300px;height:100px;background:grey;}
.yellow{width:100%;max-width:300px;height:100px;background:yellow;}
</style>

关于javascript - 单击同一按钮显示不同的 div - Angular JS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41950932/

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