Módulos de AngularJS Tablas de AngularJS

HTML DOM de AngularJS

以下指令用于将应用程序数据绑定到HTML DOM元素的属性-

序号	名称与说明
1	`ng-disabled` 禁用给定的控件。
2	`ng-show` 显示给定的控件。
3	`ng-hide` 隐藏给定的控件。
4	`ng-click` 表示AngularJS click事件。

ng-disabled指令

将ng-将disabled属性添加到HTML按钮，然后将其传递给模型。将模型绑定到复选框，然后查看变化。

<input type = "checkbox" ng-model = "enableDisableButton">Deshabilitar Botón<button ng-disabled="enableDisableButton">Haga clic en mí!</button>

ng-show指令

将ng-将show属性添加到HTML按钮，然后将其传递给模型。将模型绑定到复选框，然后查看变化。

<input type = "checkbox" ng-model="showHide1">Mostrar Botón<button ng-show="showHide1">Haga clic en mí!</button>

ng-hide指令

将ng-将hide属性添加到HTML按钮，然后将其传递给模型。将模型绑定到复选框，然后查看变化。

<input type = "checkbox" ng-model="showHide2">Ocultar Botón<button ng-hide="showHide2">Haga clic en mí!</button>

ng-click指令

将ng-将click属性添加到HTML按钮并更新模型。将模型绑定到HTML并查看变化。

<p>Total　click:　{{　clickCounter　}}</p><button ng-click="clickCounter = clickCounter　+　1">Haga clic en mí!</button>

ejemplo en línea

以下示例显示了上述所有指令的使用。

testAngularJS.htm

ejemplo

<html>
　　　<head>
　　　　　　<title>AngularJS　HTML　DOM</title>
　　　</head>
　　　
　　　<body>
　　　　　　<h2>AngularJS-HTML DOM示例(oldtoolbag.com)</h2>
　　　　　　
　　　　　　<div ng-app = "">
　　　　　　　　　<table border = "0">
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td><input type="checkbox" ng-model="enableDisableButton">Desactivar botón</td>
　　　　　　　　　　　　　　　<td><button ng-disabled="enableDisableButton">Haga clic en mí!</button></td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td><input type="checkbox" ng-model="showHide1">Mostrar botón</td>
　　　　　　　　　　　　　　　<td><button ng-show="showHide1">Haga clic en mí!</button></td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td><input type="checkbox" ng-model="showHide2">Ocultar botón</td>
　　　　　　　　　　　　　　　<td><button ng-hide="showHide2">Haga clic en mí!</button></td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td><p>Total de clics: {{ clickCounter }}</p></td>
　　　　　　　　　　　　　　　<td><button ng-click="clickCounter = clickCounter　+　1">Haga clic en mí!</button></td>
　　　　　　　　　　　　</tr>
　　　　　　　　　</table>
　　　　　　</div>
　　　　　　
　　　　　　<script src="https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js">
　　　　　　</script>
　　　　　　
　　　</body>
</html>

Prueba y mira‹/›

Resultados de salida

Abrir el archivo en el navegador de internettestAngularJS.htmy ver los resultados.