Angularjs button hide and show

Question

I am new to Angularjs. I have 4 buttons "edit, Reset password, ok, cancel'. When the page loads I have to show edit and Reset password buttons. When I click edit "ok and cancel " buttons should be visible and "edit and Reset password" buttons should be hidden and vice versa. But when I click "Reset password" button popup should open. How can I do this?

possible duplicate of [AngularJs: ng-show / ng-hide](http://stackoverflow.com/questions/12599637/angularjs-ng-show-ng-hide) — Umur Kontacı, Dec 24 '14 at 06:09
what have you tried so far? This is pretty basic and covered in many tutorials and blogs on Angular. — New Dev, Dec 24 '14 at 06:13

score 2 · Answer 1 · answered Dec 24 '14 at 07:02

Here is code:

<head>
     <script src="js/libs/angular.min.js"></script>
</head>
<body>

<h3 align="center">ng-Click ng-Show demo</h3>
   <div ng-init="showButton=false" ng-controller="buttonController">
       <button ng-show="showButton" ng-click="toggle()">Edit</button>
       <button ng-show="showButton" ng-click="showPopup()">Reset Password</button>
       <button ng-hide="showButton" ng-click="toggle()">OK</button>
       <button ng-hide="showButton">CANCEL</button>
  </div>
<script>
     function buttonController($scope){
         $scope.toggle=function(){                    
                $scope.showButton=!$scope.showButton;   
            };
         $scope.showPopup=function(){
           window.alert("Do want to reset?");
         }
     }
</script>
</body>

score 0 · Answer 2 · answered Dec 24 '14 at 06:24

You can use ng-hide and ng-show for that.

<input ng-hide = "someVariable"> abc </input>

If "someVariable" is true then this input element will get hidden and will be visible if it is false.

For more: https://docs.angularjs.org/api/ng/directive/ngHide

Angularjs button hide and show

2 Answers2