-1

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?

Vidi Samy
  • 19
  • 1
  • 5
  • 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

2 Answers2

2

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>

sarang
  • 86
  • 6
0

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

Harsh
  • 1,655
  • 1
  • 9
  • 16