AngularJS HTML DOM

AngularJS fournit des directives qui lient les données de l'application aux attributs des éléments HTML DOM.

Directive ng-disabled

ng-disabledLa directive lie directement les données de l'application à l'attribut disabled du HTML.

Exemple AngularJS

<div ng-app="" ng-init="mySwitch=true">

<p>
<button ng-disabled="mySwitch">Cliquez-moi !</button>
</p>

<p>
<input type="checkbox" ng-model="mySwitch">Bouton
</p>

<p>
{{ mySwitch }}
</p>

</div>

Essayez-le vous-même »

Explication de l'exemple :

ng-disabledLa directive lie les données de l'application "mySwitch" à l'attribut disabled du HTML.

ng-modelLa directive lie "mySwitch" au contenu (valeur) de l'élément input checkbox HTML.

SimySwitchesttrue, le bouton sera désactivé :

<p>
<button disabled>Cliquez-moi !</button>
</p>

SimySwitchestfalse, le bouton sera activé :

<p>
<button>Cliquez-moi !</button>
</p>

Directive ng-show

ng-showLa directive masque ou affiche un élément HTML.

Exemple AngularJS

<div ng-app="">

<p ng-show="true">Je suis visible.</p>

<p ng-show="false">Je suis invisible.</p>

</div>

Essayez-le vous-même »

La directive ng-show, basée sur valuela valeur, affiche (masque) l'élément HTML.

Vous pouvez utiliser des expressions pour calculer des valeurs booléennes (true ou false) :

Exemple AngularJS

<div ng-app="" ng-init="hour=13"> <p ng-show="hour > 12">Je suis visible.</p> </div>

Essayez-le vous-même »

Note Dans le chapitre suivant, nous présenterons plus d'exemples de masquage d'éléments HTML en cliquant sur des boutons.

Directive ng-hide

ng-hideLa directive est utilisée pour masquer ou afficher un élément HTML.

Exemple AngularJS

<div ng-app="">

<p ng-hide="true">Je suis invisible.</p>

<p ng-hide="false">Je suis visible.</p>

</div>

Essayez-le vous-même »
Autres extensions