AngularJS: Hide button after click

Question

New to Angular and struggling with how to do things the "Angular Way". All I want to do is click a button to show a hidden element inside a view then hide the button that was clicked. 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();
  }

Code sample: Plunker

Ideally would like to incorporate

ng-hide

on the button and not have a function run inside of the controller.

Kendall · Accepted Answer · 2015-07-20 23:23:35Z

8

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

Should work also

answered Jul 20, 2015 at 23:23

Kendall

5,25511 gold badges49 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

code · Accepted Answer · 2015-07-20 23:22:41Z

6

Just add ng-show="!showDiv" to your button, this will hide it if showDiv = true

Just to be clear new html should look:

<button class="btn btn-primary" ng-click="showDiv=true" ng-show="!showDiv">Show Div</button>

answered Jul 20, 2015 at 23:22

code

1,1378 silver badges14 bronze badges

Collectives™ on Stack Overflow

AngularJS: Hide button after click

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related