CODEWITHSUNDEEP
angularjs
Mh07
Mh07

Reputation: 33

Hide button after ng-click using AngularJS

I'm new to angularjs and wanted to know how to hide a button after clicking (using ng-click) on it.

<button ng-click="xyz()" class="btn-default pull-right">
    Start
</button>

Upvotes: 0

Views: 632

Answers (4)

ganesh kalje
ganesh kalje

Reputation: 3182

In View: 

 <button ng-click="hideBtn = true" ng-hide="hideBtn">Button</button>

In controller :

 $scope.hideBtn = false;

Upvotes: -1

ssougnez
ssougnez

Reputation: 5886

Basically, you needs two things:

  • A variable leveraging the button visibility
  • A function to update this variable (you could do it in the HTML but I discourage it).

So you would have your button:

<button ng-click="hideButton()" ng-show="isButtonVisible === true" class="btn-default pull-right">
    Start
</button>

Then, you would have the following variables

$scope.isButtonVisible = true; // true to make the button visible by default

And finally, the function that toggles it:

$scope.hideButton = function() {
    $scope.isButtonVisible = false;
}

Note that you could use ng-if to remove the button from the DOM if you won't need it again.

Example: https://plnkr.co/edit/fnW8HR58zKHs4T34XRan

Note that this is pretty much the most basic question you could have on AngularJS, so I would advice you to read a bit about it before asking Stack Overflow.

Upvotes: 3

Mh07
Mh07

Reputation: 33

I found the answer to the question with some assistance. Created an event in the click function and was able to hide the button. 

<button ng-click="xyz($event)" class="btn-default pull-right">Start</button>

$scope.xyz = function ($event) {
    $($event.target).hide();

Cheers to all your guidance.

Upvotes: -1

hunguyenv
hunguyenv

Reputation: 51

You will need a variable to denote the visibility of the button, its value will change with click event.

<button ng-click="clickEventFunction(params)" ng-hide="isButtonVissible">Button</button>

The default value of this variable should be "false" to show the button

$scope.isButtonVissible = false

Then in the clickEventFunction, change the value to hide the button

$scope.clickEventFunction = function(params){
$scope.isButtonVissible = true; 
//* Do the logic code
}

Upvotes: 0

Related Questions