AngularJS je m'y mets !

Visibilité

Il arrive fréquemment qu'on veuille masquer ou au contraire afficher un élément d'une page selon le contexte. On le fait en général en CSS avec :

display:none

pour rendre invisible. C'est ce que fait AngularJS avec les directives ngShow et ngHide. Voici un exemple :

<div ng-app>
	Cochez pour voir la suite : <input type="checkbox" ng-model="voir"><br/>
	<p ng-show="voir">Je suis la suite !</p>
	Cochez pour ne pas voir la suite : <input type="checkbox" ng-model="cacher"><br/>
	<p ng-hide="cacher">Je suis la suite !</p>	
</div>
Cochez pour voir la suite :

Je suis la suite !

Cochez pour ne pas voir la suite :

Je suis la suite !

J'ai créé un lien entre les cases à cocher et les paragraphes avec la directive ngModel. Ainsi lorsque la valeur la case change elle est répercutée sur la valeur de la classe dans les paragraphes. Au départ on a ce code qui est généré :

Cochez pour voir la suite : <input class="ng-valid ng-dirty" ng-model="voir" type="checkbox"><br>
<p style="display: none;" ng-show="voir">Je suis la suite !</p>
Cochez pour ne pas voir la suite : <input class="ng-valid ng-dirty" ng-model="cacher" type="checkbox"><br>
<p style="" ng-hide="cacher">Je suis la suite !</p>	

On se rend compte qu'une règle de style display: none a été ajoutée pour le premier paragraphe qui doit être invisible. Si vous changez la valeur des coches vous verrez le style s'adapter automatiquement.

Suivant

Retour à l'accueil...