Clever Geek Handbook

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-hide
on the button and do not perform the function inside the controller.
+3


source to share


2 answers 


<button ng-hide="showDiv"...


Should work and

+7


source


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


source






More articles:


All Articles