Manipulate HTML DOM in AngularJS, Disable, show, hide elements in AngularJS

The directives which are used to change HTML attributes are ng-disabled, ng-show, ng-hide.

Ng-disabled - ex: Disables a button.

Ng-show - ex: used to show a HTML element.

Ng-hide - ex: hides a html element.

Demo:

Disable, show, hide elements in AngularJS

Disable, show, hide elements in AngularJS

Click to Disable :

Click to Show a Button :

Click to Hide :

This is a show/hide text


Example
<html>
 
   <head>
      <title>Disable, show, hide elements in AngularJS</title>
   </head>
 
   <body>
      <h2>Disable, show, hide elements in AngularJS</h2>
      <div ng-app = "">
 
         <div>
               <span><input type = "checkbox" ng-model = "disable">Click to Disable : </span>
               <span><input type="textbox" value="sample" ng-disabled = "disable"/></span>
            </div>
            <br/>
            <div>
               <span><input type = "checkbox" ng-model = "ngshow">Click to Show a Button : </span>
               <span><button ng-show = "ngshow">Button 1</button></span>
            </div>
            <br/>
            <div>
               <span><input type = "checkbox" ng-model = "nghide">Click to Hide  :</span>
               <span><div ng-hide = "nghide"><h3>This is a show/hide text</h3></span>
            </div>
      </div>
 
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
 
   </body>
</html>
Category: