I have the following code. I need to hide div 1 and display div2 when the button in div one is clicked. (In ANGULAR HTML5). I have a JS file with controllers etc. at the moement I have two diffetent html template files and I call these as separate modal pop up. Now instead of two pop ups, I need to just show only one pop up but just display or hide content from one of the divs.
<div id="div1">
<button name ="click" click="ClickMe()"/>
</div>
<div id = "div2">
<p> Some content</p>
</div>
This should toggle displayToggled on click, and remove the div from which the button was clicked from the DOM.
<div id="div1" ng-if="!displayToggled" >
<button name ="click" ng-click="displayToggled = true"/>
</div>
<div id = "div2" ng-if="displayToggled">
<p> Some content</p>
</div>
In your html
<body ng-app="myApp" ng-controller="myctrl as ctrl">
<div id="div1" ng-show="ctrl.btn">
<button name ="click" ng-click="ctrl.btn=!ctrl.btn"/>
</div>
<div id = "div2" ng-show="!ctrl.btn">
<p> Some content</p>
</div>
</div>
in your controller
.controller('myctrl', function(){
this.btn = true;
})
