AngularJS: Hide button after click
New to Angular and struggling with how to do things "the Angular way". All I want to do is click a button to show the hidden item inside the view and then hide the clicked button. Any help would be awesome.
HTML:
<button class="btn btn-primary" ng-click="showDiv=true; hideMe()">
Show Div
</button>
<div ng-show="showDiv">
I was hidden now you see me, but how do I hide the button?
</div>
Controller:
$scope.hideMe = function(){
console.log('hide the button');
$scope.hide();
}
Example code: Plunker
Ideally I would like to include
ng-hideon the button and do not perform the function inside the controller.
+3
Full-Hybrid
source
to share
2 answers
<button ng-hide="showDiv"...
Should work and
+7
Kendall
source
to share
Just add ng-show="!showDiv"
to your button, this will hide it if showDiv = true
Just to be clear, the new html should look like:
<button class="btn btn-primary" ng-click="showDiv=true" ng-show="!showDiv">Show Div</button>
+6
code
source
to share