AngularJS: show other div and hide current div on click of a button
Question
I have a <div> which contains a <button> . When this button is clicked, I want this <div> to be hidden and another new <div> to be shown in place of the current <div> . Also, the new <div> contains a <button> , which when clicked opens the old <div> . This will enable me to open one <div> at a time on click of the <button> present in those <div> . Can anyone tell me how to do this in AngularJS?
3 answers
solution1
0 2016-08-22 11:34:53
Please try something similar to below: use ng-click and ng-show
<div ng-show="!showDiv">
<button ng-click="showDiv=true"></button>
</div>
<div ng-show="showDiv">
<button ng-click="showDiv=false"></button>
</div>
solution2
0 2016-08-22 11:35:58
Using ngShow :
<div ng-show="condition" ng-init="condition = true">
<button ng-click="condition = false">Toggle</button>
</div>
<div ng-show="!condition">
<button ng-click="condition = true">Toggle</button>
</div>
But keep in mind to seperate logic like the toggle in ngClick from the view and put it in the controller.
solution3
0 ACCPTED 2016-08-22 11:37:45
<body ng-init="showDiv = true">
<div ng-show="showDiv">
<h1>Div 1</h1>
<button ng-click="showDiv = false">Show Div 2</button>
</div>
<div ng-hide="showDiv">
<h1>Div 2</h1>
<button ng-click="showDiv = true">Show Div 1</button>
</div>
</body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.