angularjs dom angularjsdom|AngularJS教程

在AngularJS中，可以使用一些指令将应用程序数据绑定到HTML DOM元素的属性。

指示	描述
ng-disabled	它禁用给定的控件。
ng-show	它显示了给定的控件。
ng-hide	它隐藏了给定的控件。
ng-click	它表示一个AangularJS click事件。

ng-disabled指令：ng-disabled指令将AngularJS应用程序数据绑定到HTML元素的disable属性。在下面的代码中，它将模型绑定到复选框。

< input type = "checkbox" ng-model = "enableDisableButton">Disable Button < button ng-disabled = "enableDisableButton">Click Me!< /button>

ng-show指令：ng-show指令显示或隐藏HTML元素。在下面的代码中，它将模型绑定到复选框。

< input type = "checkbox" ng-model = "showHide1">Show Button < button ng-show = "showHide1">Click Me!< /button>

ng-hide指令：ng-hide指令隐藏或显示HTML元素。在下面的代码中，它将模型绑定到复选框。

< input type = "checkbox" ng-model = "showHide2">Hide Button < button ng-hide = "showHide2">Click Me!< /button>

ng-click指令：ng-click指令计算HTML元素的总点击次数。在下面的代码中，它将模型绑定到复选框。

< p>Total click: {{ clickCounter }}< /p> < button ng-click = "clickCounter = clickCounter + 1">Click Me!< /button>

【angularjs dom】让我们以一个示例来部署上述所有指令并测试其变体：
请参阅以下示例：

< !DOCTYPE html> < html> < head> < title>AngularJS HTML DOM< /title> < /head> < body> < h2>AngularJS Sample Application< /h2> < div ng-app = ""> < table border = "0"> < tr> < td>< input type = "checkbox" ng-model = "enableDisableButton">Disable Button< /td> < td>< button ng-disabled = "enableDisableButton">Click Me!< /button>< /td> < /tr> < tr> < td>< input type = "checkbox" ng-model = "showHide1">Show Button< /td> < td>< button ng-show = "showHide1">Click Me!< /button>< /td> < /tr> < tr> < td>< input type = "checkbox" ng-model = "showHide2">Hide Button< /td> < td>< button ng-hide = "showHide2">Click Me!< /button>< /td> < /tr> < tr> < td>< p>Total click: {{ clickCounter }}< /p>< /td> < td>< button ng-click = "clickCounter = clickCounter + 1">Click Me!< /button>< /td> < /tr> < /table> < /div> < script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">< /script> < /body> < /html>