display a list if an ionic option is chosen

Question

display a list if an ionic option is chosen

Navigation

#1 by (0 votes)

1

I'm making an application in ionic3 to make an income of hours per work area (unit), where there are several projects per area (unit), what I want to realize is that when selecting a unit, only enable me the projects for that unit, I was reviewing the option * ngif that works with constraints but it does not allow me to place one of the options for the unit that I want to select, this is my code since at the moment it displays all the projects for all the units. If anyone has any idea how to solve this, I would appreciate it very much

<ion-content padding>
<form (ngSubmit)="onAddTarea(f.value)" #f="ngForm">
<ion-list>
    <ion-item>
      <ion-label>Nombre de la unidad</ion-label>
      <ion-select [(ngModel)]="unidad" multiple="false" name="unidad">  
        <ion-option>Unidad 1</ion-option>
        <ion-option>Unidad 2</ion-option>
        <ion-option>Unidad 3</ion-option>    
      </ion-select>

    </ion-item>
    <ion-item>
      <ion-label>Nombre del proyecto</ion-label>

        <ion-select [(ngModel)]="proyecto" multiple="false" name="proyecto">
          <ion-option>Proyecto 1 unidad 1</ion-option>
          <ion-option>Proyecto 2 unidad 1</ion-option>
          <ion-option>Proyecto 3 unidad 1</ion-option>
        </ion-select>

        <ion-select [(ngModel)]="proyecto" multiple="false" name="proyecto">
          <ion-option>Proyecto 1 unidad 2</ion-option>
          <ion-option>Proyecto 2 unidad 2</ion-option>
          <ion-option>Proyecto 3 unidad 2</ion-option>
        </ion-select>

        <ion-select [(ngModel)]="proyecto" multiple="false" name="proyecto">
          <ion-option>Proyecto 1 unidad 3</ion-option>
          <ion-option>Proyecto 2 unidad 3</ion-option>
          <ion-option>Proyecto 3 unidad 3</ion-option>
        </ion-select>

    </ion-item>
    <ion-item>
</ion-list>
</form>
</ion-content>

lista ionic formularios

asked by Diego Jaramillo 25.04.2018 в 01:28

source

1 answer

Error counting list with PHP count Add items in the DOM [closed]

score 0 · Answer 1

Add an (ionChange) linked to a function to detect the changes to the select units and the * ngIf in each project select

<ion-content padding>
<form (ngSubmit)="onAddTarea(f.value)" #f="ngForm">
<ion-list>
    <ion-item>
      <ion-label>Nombre de la unidad</ion-label>
      <ion-select [(ngModel)]="unidad" multiple="false" name="unidad" (ionChange)="mostrarOpciones($event)" >  
        <ion-option value="unidad1">Unidad 1</ion-option>
        <ion-option value="unidad2">Unidad 2</ion-option>
        <ion-option value="unidad3">Unidad 3</ion-option>    
      </ion-select>

    </ion-item>
    <ion-item>
      <ion-label>Nombre del proyecto</ion-label>

        <ion-select [(ngModel)]="proyecto" multiple="false" name="proyecto" *ngIf="mostrarProyecto1">
          <ion-option>Proyecto 1 unidad 1</ion-option>
          <ion-option>Proyecto 2 unidad 1</ion-option>
          <ion-option>Proyecto 3 unidad 1</ion-option>
        </ion-select>

        <ion-select [(ngModel)]="proyecto" multiple="false" name="proyecto" *ngIf="mostrarProyecto2">
          <ion-option>Proyecto 1 unidad 2</ion-option>
          <ion-option>Proyecto 2 unidad 2</ion-option>
          <ion-option>Proyecto 3 unidad 2</ion-option>
        </ion-select>

        <ion-select [(ngModel)]="proyecto" multiple="false" name="proyecto" *ngIf="mostrarProyecto3">
          <ion-option>Proyecto 1 unidad 3</ion-option>
          <ion-option>Proyecto 2 unidad 3</ion-option>
          <ion-option>Proyecto 3 unidad 3</ion-option>
        </ion-select>

    </ion-item>
    <ion-item>
</ion-list>
</form>

In your component.ts add visibility variables for each ion-select (those in the ngIf) and the "showOptions" function should do the work.

//imports...

export class UnidadesPage{

    mostrarProyecto1:boolean = false;
    mostrarProyecto2:boolean = false;
    mostrarProyecto3:boolean = false;

    constructor() {}

    mostrarOpciones(unidad:string){
        switch(unidad){
            case 'unidad1':
                this.mostrarProyecto1 = true;
                if(this.mostrarProyecto2) this.mostrarProyecto2 = false ;
                if(this.mostrarProyecto3) this.mostrarProyecto3 = false ;
                break;
            case 'unidad2':
                this.mostrarProyecto2 = true;
                if(this.mostrarProyecto1) this.mostrarProyecto1 = false ;
                if(this.mostrarProyecto3) this.mostrarProyecto3 = false ;
                break;
            case 'unidad3':
                this.mostrarProyecto3 = true;
                if(this.mostrarProyecto2) this.mostrarProyecto2 = false ;
                if(this.mostrarProyecto1) this.mostrarProyecto1 = false ;
                break;
        }
    }

}