DOM HTML AngularJS


AngularJS fournit des instructions pour lier les données d'application aux attributs des éléments HTML DOM. Directive

ng-disabled La directive

ng-disabled lie directement les données d'application à l'attribut désactivé du HTML.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="" ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">点我!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch"/>按钮
</p>
<p>
{{ mySwitch }}
</p>
</div> 

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Explication avec exemples :

ng-disabled L'instruction lie les données d'application "mySwitch" à l'attribut désactivé du HTML. La directive

ng-model lie "mySwitch" au contenu (valeur) de l'élément de case à cocher d'entrée HTML.

Si mySwitch est true, le bouton sera désactivé :

<p >
<bouton désactivé>Cliquez-moi ! </bouton>
</p>

Si mySwitch est false, les boutons sont disponibles :

<p>
<bouton>Cliquez sur moi !< /bouton>
</p>
La directive

ng-show

ng-show masque ou affiche un élément HTML.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="">

<p ng-show="true">我是可见的。</p>

<p ng-show="false">我是不可见的。</p>

</div> 

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

La directive

ng-show affiche (masque) les éléments HTML en fonction de la valeur de value.

Vous pouvez utiliser des expressions pour évaluer des valeurs booléennes (vrai ou faux) :

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="" ng-init="hour=13">

<p ng-show="hour > 12">我是可见的。</p>

</div>

</body>
</html>

Exécuter l'instance »

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

La directive
Note在下一个章节中，我们将为大家更多通过点击按钮来隐藏 HTML 元素的实例。

ng-hide La directive

ng-hide est utilisée pour masquer ou afficher des éléments HTML.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="">

<p ng-hide="true">我是不可见的。</p>

<p ng-hide="false">我是可见的。</p>

</div> 

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne