AngularJS HTML DOM

Les instructions suivantes sont utilisées pour lier les données de l'application aux attributs des éléments HTML DOM-

Numéro	Nom et description
1	`ng-disabled` Désactiver le contrôle donné.
2	`ng-show` Afficher le contrôle donné.
3	`ng-hide` Cacher le contrôle donné.
4	`ng-click` représente l'événement click AngularJS.

ng-disabled instruction

Ajoutez ng-Ajoutez l'attribut disabled à un bouton HTML et transmettez-le au modèle. Liez le modèle au bouton d'option et regardez les changements.

<input type="checkbox" ng-model="enableDisableButton">Désactiver le bouton<button ng-disabled　=　"enableDisableButton">Click　Me!</button>

ng-show instruction

Ajoutez ng-Ajoutez l'attribut show à un bouton HTML et transmettez-le au modèle. Liez le modèle au bouton d'option et regardez les changements.

<input type="checkbox" ng-model　=　"showHide1">Afficher le bouton<button ng-show　=　"showHide1">Click　Me!</button>

ng-hide instruction

Ajoutez ng-Ajoutez l'attribut hide à un bouton HTML et transmettez-le au modèle. Liez le modèle au bouton d'option et regardez les changements.

<input type="checkbox" ng-model　=　"showHide2">Cacher le bouton<button ng-hide　=　"showHide2">Click　Me!</button>

ng-click instruction

Ajoutez ng-Ajoutez l'attribut click à un bouton HTML et mettez à jour le modèle. Liez le modèle à l'HTML et regardez les changements.

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

Exemple en ligne

Les exemples suivants montrent l'utilisation de toutes les instructions mentionnées précédemment.

testAngularJS.htm

Exemple

<html>
　　　<head>
　　　　　　<title>AngularJS HTML DOM</title>
　　　</head>
　　　
　　　<body>
　　　　　　<h2>AngularJS-HTML DOM exemple(oldtoolbag.com)</h2>
　　　　　　
　　　　　　<div ng-app="">
　　　　　　　　　<table border="0">
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td><input　type　=　"checkbox"　ng-model　=　"enableDisableButton">Désactiver le bouton</td>
　　　　　　　　　　　　　　　<td><button　ng-disabled　=　"enableDisableButton">Click　Me!</button></td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td><input　type　=　"checkbox"　ng-model　=　"showHide1">显示按钮</td>
　　　　　　　　　　　　　　　<td><button　ng-show　=　"showHide1">Click　Me!</button></td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td><input　type　=　"checkbox"　ng-model　=　"showHide2">隐藏按钮</td>
　　　　　　　　　　　　　　　<td><button　ng-hide　=　"showHide2">Click　Me!</button></td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td><p>点击总数:　{{　clickCounter　}}</p></td>
　　　　　　　　　　　　　　　<td><button　ng-click　=　"clickCounter　=　clickCounter　+　1">Click　Me!</button></td>
　　　　　　　　　　　　</tr>
　　　　　　　　　</table>
　　　　　　</div>
　　　　　　
　　　　　　<script　src　=　"https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js">
　　　　　　</script>
　　　　　　
　　　</body>
</html>

测试看看‹/›

输出结果

在网络浏览器中打开文件testAngularJS.htm并查看结果。

AngularJS 模块 AngularJS 表格