Skip to content
Related Articles

Related Articles

AngularJS | HTML DOM
  • Last Updated : 09 May, 2019

ng-show and ng-hide Directive:
Both directives use to show or hide the element of HTML. It is depend upon the value of directives. Values are either “true” or “false”.

Example-1:




<!DOCTYPE html>
<html>
<script src=
  </script>
  
<body>
    <center>
        <div ng-app="">
            <!-- ng-show =true -->
            <h1 style="color:green" ng-show="true">
              GeeksforGeeks</h1>
            
            <!-- ng-show =false -->
            <p ng-show="false">GeeksforGeeks</p>
            
            <!-- ng-hide =true -->
            <p ng-hide="true">ng-hide is true</p>
            
            <!-- ng-hide =false -->
            <p ng-hide="false">
              A Computer Science Portal For Geeks</p>
        </div>
    </center>
</body>
  
</html>

Output:

ng-disabled Directives:
It disables the attribute of HTML elements. It binds the data to disabled HTML element’s attributes.
Example-2:




<!DOCTYPE html>
<html>
<script src=
  </script>
  
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <div ng-app="" ng-init="mySwitch=true">
            <p>
                <button ng-disabled="mySwitch" 
                        onclick="alert('Not Disabled')">
                  Click Me!
              </button>
            </p>
            <p>
                <input type="checkbox" 
                       ng-model="mySwitch"/>
              Button
            </p>
            <p>
                {{ mySwitch }}
            </p>
        </div>
    </center>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :