Salut,

J'utilise Ionic pour créer des formulaires plus ou moins complexes, Ca marche plutôt bien mais il y a une chose que je trouve très peu pratique.

J'ai un formulaire dans un div1, quand tu cliques sur une checkbox de ce formulaire, ça crée une variable arricherDiv2 qui fait afficher div2 dans lequel une autre checkbox crée afficherDiv3 permet d'afficher div3 et ainsi de suite.

Tout serait parfait sauf que quand tu décoches la checkbox dans le formulaire du div1, div2 disparait mais pas div3.

Je connais deux solutions pour pallier au problème :

• ajouter afficherDiv2 dans les condition d'affichage de div3... mais comme j'ai plein de chemins possibles avant d'arriver à div3, mon ngIf devient énorme.
• mettre dans l'évènement click de la checkbox de div1 afficherDiv3=false mais c'est assez lourd.

Du coup je me demande s'il n'y a pas un moyen simple de supprimer / mettre à false toutes les variables créées dans un div lorsque ngIf n'est pas valide ?

Le code :

<ion-item>
	<ion-label color="primary">Afficher DIV 2</ion-label>
	<ion-checkbox item-right name="afficherDiv2" (click)="afficherDiv2= !afficherDiv2" [checked]="afficherDiv2"></ion-checkbox>
</ion-item>
<div *ngIf="afficherDiv2">
	<ion-item>
		<ion-label color="primary">Afficher DIV 3</ion-label>
		<ion-checkbox item-right name="afficherDiv3" (click)="afficherDiv3= !afficherDiv3" [checked]="afficherDiv3"></ion-checkbox>
	</ion-item>
</div>
<div *ngIf="afficherDiv3">
	<ion-item>
		Du contenu de div 3
	</ion-item>
</div>

La solution 1 :

<ion-item>
	<ion-label color="primary">Afficher DIV 2</ion-label>
	<ion-checkbox item-right name="afficherDiv2" (click)="afficherDiv2= !afficherDiv2" [checked]="afficherDiv2"></ion-checkbox>
</ion-item>
<div *ngIf="afficherDiv2">
	<ion-item>
		<ion-label color="primary">Afficher DIV 3</ion-label>
		<ion-checkbox item-right name="afficherDiv3" (click)="afficherDiv3= !afficherDiv3" [checked]="afficherDiv3"></ion-checkbox>
	</ion-item>
</div>
<div *ngIf="afficherDiv3 && afficherDiv2">
	<ion-item>
		Du contenu de div 3
	</ion-item>
</div>

La solution 2 :

<ion-item>
	<ion-label color="primary">Afficher DIV 2</ion-label>
	<ion-checkbox item-right name="afficherDiv2" (click)="afficherDiv2= !afficherDiv2; if(!afficherDiv2){afficherDiv3=false;}" [checked]="afficherDiv2"></ion-checkbox>
</ion-item>
<div *ngIf="afficherDiv2">
	<ion-item>
		<ion-label color="primary">Afficher DIV 3</ion-label>
		<ion-checkbox item-right name="afficherDiv3" (click)="afficherDiv3= !afficherDiv3" [checked]="afficherDiv3"></ion-checkbox>
	</ion-item>
</div>
<div *ngIf="afficherDiv3">
	<ion-item>
		Du contenu de div 3
	</ion-item>
</div>

Ce que j'aimerais c'est pouvoir supprimer ou passer à null afficherDiv3 quand le second div disparait.

Merci d'avance pour vos réponses.

-
Edité par Ponu 17 juin 2018 à 11:24:00

Tu ne peux pas appeler une fonction plutôt que tes conditions booléennes dans ton ngIf ? Et dans cette fonction tu peux mettre les conditions que tu souhaites sans polluer le code HTML.

Juste pour préciser, je ne connais pas Ionic mais AngularJS.

-
Edité par BuRner 17 juin 2018 à 11:29:14

Salut,

Tout d'abord merci pour ta réponse et désolé de répondre si tard.

Malgré de nombreuses recherches, je n'ai pas trouvé exactement ce que je cherche.

Par contre, je viens de trouver ça : https://alligator.io/angular/ngif-new-features-angular4/

Ca peut intéresser quelqu'un. Je pense que la prochaine étape sera de faire ce que je veux !