AngularJS HTML ACCUEIL
AngularJS a des directives pour lier les données d'application aux attributs des éléments HTML DOM.
La directive ng-handicapés
La directive ng-disabled lie les données d'application AngularJS à l'attribut disabled des éléments HTML.
Exemple AngularJS
<div ng-app="" ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">Click Me!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch">Button
</p>
<p>
{{ mySwitch }}
</p>
</div>
Application expliquée :
La directive ng-disabled lie les données d'application mySwitch à l'attribut disabled du bouton HTML .
La directive ng-model lie la valeur de l'élément HTML checkbox à la valeur de mySwitch .
Si la valeur de mySwitch est évaluée à true , le bouton sera désactivé :
<p>
<button disabled>Click Me!</button>
</p>
Si la valeur de mySwitch est évaluée à false , le bouton ne sera pas désactivé :
<p>
<button>Click Me!</button>
</p>
La directive ng-show
La directive ng-show affiche ou masque un élément HTML.
Exemple AngularJS
<div ng-app="">
<p ng-show="true">I am visible.</p>
<p ng-show="false">I am not visible.</p>
</div>
La directive ng-show affiche (ou masque) un élément HTML basé sur la valeur de ng-show.
Vous pouvez utiliser n'importe quelle expression dont la valeur est true ou false :
Exemple AngularJS
<div ng-app="" ng-init="hour=13">
<p ng-show="hour > 12">I am visible.</p>
</div>
Dans le chapitre suivant, il y a plus d'exemples, utilisant le clic d'un bouton pour masquer des éléments HTML.
La directive ng-hide
La directive ng-hide masque ou affiche un élément HTML.
Exemple AngularJS
<div ng-app="">
<p ng-hide="true">I am
not visible.</p>
<p ng-hide="false">I am visible.</p>
</div>