Discussion :

[djo007]

Bonjour à tous,

J'ai un petit souci avec [ngStyle] sous IONIC angularjs qui ne réagi pas avec mon JS, la valeur de la variable change bien pourtant.. donc je ne comprend pas..
Mon but est d'afficher le 2 éme <ion-select> quand le premier est remplis, donc je commence par le cacher puis je cherche à le faire apparaître avec ma fonction onSelectChange(); quand le premier est remplis..

Merci d'avance

code de la page:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<ion-content>
  <ion-item>
    <ion-label color="primary">Selectionnez une régions</ion-label>
    <ion-select [(ngModel)]="region" (ionChange)="onSelectChange($event)">
        <ion-option value="1">Alsace</ion-option>
        <ion-option value="2">Aquitaine</ion-option>
        <ion-option value="3">Auvergne</ion-option>
        <ion-option value="4">Basse-Normandie</ion-option>
        <ion-option value="5">Bourgogne</ion-option>
        <ion-option value="6">Bretagne</ion-option>
        <ion-option value="7">Centre</ion-option>
        <ion-option value="8">Champagne</ion-option>
        <ion-option value="9">Corse</ion-option>
        <ion-option value="10">Franche-Comté</ion-option>
        <ion-option value="11">Haute-Normandie</ion-option>
        <ion-option value="12">Île-de-France</ion-option>
        <ion-option value="13">Languedoc-Roussillon</ion-option>
        <ion-option value="14">Limousin</ion-option>
        <ion-option value="15">Lorraine</ion-option>
        <ion-option value="16">Midi-Pyrénées</ion-option>
        <ion-option value="17">Nord-pas-de-Calais</ion-option>
        <ion-option value="18">Pays de la Loire</ion-option>
        <ion-option value="19">Picardie</ion-option>
        <ion-option value="20">Poitou-Charentes</ion-option>
        <ion-option value="21">Provence-Alpes-Côte-d'Azur</ion-option>
        <ion-option value="22">Rhône-Alpes</ion-option>
    </ion-select>
  </ion-item>
 
  <ion-item class="dep" [ngStyle]="{display:regionSeleted}" >
    <ion-label color="primary">Choisissez un département</ion-label>
    <ion-select [(ngModel)]="departement" >
        <ion-option value="1">Ain</ion-option>
        <ion-option value="2">Aisne</ion-option>
        <ion-option value="3">Allier</ion-option>
        <ion-option value="4">Alpes-de-Haute-Provence </ion-option>
        <ion-option value="5">Hautes-Alpes</ion-option>
    </ion-select>
  </ion-item>
 
{{regionSeleted}}
</ion-content>

code de action JS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
 
@Component({
  selector: 'page-contact',
  templateUrl: 'contact.html'
})
 
export class ContactPage {
 
	public regionSeleted: string;
 
	constructor(public navCtrl: NavController) {
		this.regionSeleted = "none";
	}
 
 
	onSelectChange(selectedValue: any) {
		console.log('Selected', selectedValue);
		this.regionSeleted = "bloc";
	}
 
}

[pterrat]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
 
@Component({
  selector: 'page-contact',
  templateUrl: 'contact.html'
})
 
export class ContactPage {
 
	public regionSeleted: string;
 
	constructor(public navCtrl: NavController) {
		this.regionSeleted = "none";
	}
 
 
	onSelectChange(selectedValue: any) {
		console.log('Selected', selectedValue);
		this.regionSeleted = "bloc";
	}
 
}

Il ne s'agit pas de bloc mais block pour ta propriété CSS.

N'hésites pas à utiliser la propriété *ngIf pour te faciliter la vie

[m4riachi]

Le plus simple est d'utilisé *ngIf

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<ion-content>
  <ion-item>
    <ion-label color="primary">Selectionnez une régions</ion-label>
    <ion-select [(ngModel)]="region" (ionChange)="onSelectChange($event)">
        <ion-option value="1">Alsace</ion-option>
        <ion-option value="2">Aquitaine</ion-option>
        <ion-option value="3">Auvergne</ion-option>
        <ion-option value="4">Basse-Normandie</ion-option>
        <ion-option value="5">Bourgogne</ion-option>
        <ion-option value="6">Bretagne</ion-option>
        <ion-option value="7">Centre</ion-option>
        <ion-option value="8">Champagne</ion-option>
        <ion-option value="9">Corse</ion-option>
        <ion-option value="10">Franche-Comté</ion-option>
        <ion-option value="11">Haute-Normandie</ion-option>
        <ion-option value="12">Île-de-France</ion-option>
        <ion-option value="13">Languedoc-Roussillon</ion-option>
        <ion-option value="14">Limousin</ion-option>
        <ion-option value="15">Lorraine</ion-option>
        <ion-option value="16">Midi-Pyrénées</ion-option>
        <ion-option value="17">Nord-pas-de-Calais</ion-option>
        <ion-option value="18">Pays de la Loire</ion-option>
        <ion-option value="19">Picardie</ion-option>
        <ion-option value="20">Poitou-Charentes</ion-option>
        <ion-option value="21">Provence-Alpes-Côte-d'Azur</ion-option>
        <ion-option value="22">Rhône-Alpes</ion-option>
    </ion-select>
  </ion-item>
 
  <ion-item class="dep" *ngIf="region > 0">
    <ion-label color="primary">Choisissez un département</ion-label>
    <ion-select [(ngModel)]="departement" >
        <ion-option value="1">Ain</ion-option>
        <ion-option value="2">Aisne</ion-option>
        <ion-option value="3">Allier</ion-option>
        <ion-option value="4">Alpes-de-Haute-Provence </ion-option>
        <ion-option value="5">Hautes-Alpes</ion-option>
    </ion-select>
  </ion-item>
 
{{regionSeleted}}
</ion-content>

[djo007]

Merci à tout les deux, j'avais même pas fait attention à mon erreur "BLOCK" bien vue ;-)

Je découvre angular depuis pas très longtemps , m'a l'aire vraiment puissant. je vais regarder pour *ngIf, j'en n'avais pas encore entendu parlé

Encore merci pour votre aide