AngularJS HTML DOM

AngularJS中的HTML DOM为将应用程序数据与HTML DOM元素的属性绑定的指令提供了便利。在这篇文章中，我们将看到这些有助于将数据与HTML DOM元素的属性绑定的指令，以及它们通过插图的基本实现。

ng-show & ng-hide Directive :这两个指令都是用来显示或隐藏HTML元素的。这取决于指令的任何一个值，即 ” true ” 或 ” false ” 。

示例1：本例通过实现ng-show和_ng-hide指令来描述AngularJS的HTML DOM。

<!DOCTYPE html>
<html>
  
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>
  
<body style="text-align: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>
</body>
</html>

输出:

AngularJS HTML DOM

ng-disabled指令 ：它禁用了HTML元素的属性。它将数据绑定到禁用的HTML元素的属性上。

例子2：这个例子实现了ng-disabled指令，使用复选框启用和禁用按钮。

<!DOCTYPE html>
<html>
  
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>
  
<body style="text-align: center;">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>AngularJS HTML DOM</h3>
    <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>
</body>
</html>

输出:

AngularJS HTML DOM