1

Buenas!! En Ionic 3.9.2 estoy usando el siguiente comando para que mediante un botón aparezca y desaparezca un En el html:

<button ion-button block (click)="accion1()"> Botón </button>
<ion-card *ngIf="ocultar1">
   <ion-card-header>
     Título              
   </ion-card-header>
   <ion-card-content>
     Contenido
   </ion-card-content>
</ion-card>

y en el ts:

export class Page { 
public ocultar1: boolean = false;
accion1(){
this.ocultar1 = !this.ocultar1;
}}

y la verdad es que me funciona perfectamente.

¿Cómo puedo hacer que un botón haga aparecer varios y desaparecer independientemente si están visibles o no?

Saludos y gracias

4
  • Podrías dar un ejemplo mas descriptivo lo que quieres conseguir? Si repites varias veces el elemento ion-card y presionas el botón accion1() te desaparece y aparece los elementos a la vez... pero creo que no es eso ya que sería bastante simple... :) Commented el 15 sept. 2017 a las 19:08
  • Perdona si no me he explicado mejor. Realmente lo que busco es que al pulsar el botón la primera vez ejecute una cosa (mostrar todos los <ion-card>) y cuando pulse de nuevo haga otra cosa (ocultar todos los <ion-card>).
    – Selzar
    Commented el 15 sept. 2017 a las 19:32
  • Perdón... era un enlace equivocado... mira si es esto lo que quieres: ver ejemplo Commented el 15 sept. 2017 a las 19:45
  • Muchas gracias, es cierto que funciona tu código, pero mi idea de base está más enfocada a esto: embed.plnkr.co/39dVQqnYD0WZYRrMSocr cada botón muestra/oculta un ion-card, pero quiero que un botón concreto muestre todos o los oculte. Si implemento el código actual solo conseguiría cambiar de true a false y viceversa la ocultación, y mi idea es que todos pasen o a true o a false. Gracias
    – Selzar
    Commented el 16 sept. 2017 a las 23:09

1 respuesta 1

0

Lo que he hecho en el siguiente ejemplo:

  1. Todos los botones al inicio están desactivados por defecto (botón acción)
  2. El botón Activar/Desactivar (botón general) está al inicio en el estado ACTIVAR TODOS
  3. En cuando estén todos los botones (1-4) activados cambia el estado botón acción a DESACTIVAR TODOS automáticamente y lo mismo funciona viceversa.

Te dejo el ejemplo:

Ver Demo

<button ion-button block (click)="acciontodos()"> {{ !ocultartodos ? 'Activar Todos' : 'Desactivar Todos' }} </button>
ocultar1: boolean     = false;
ocultar2: boolean     = false;
ocultar3: boolean     = false;
ocultar4: boolean     = false;    
ocultartodos: boolean = false;    

accion1() {        
  this.ocultar1 = !this.ocultar1;
  this.checkActiveButton();
}

accion2() {        
  this.ocultar2 = !this.ocultar2;
  this.checkActiveButton();
}

accion3() {        
  this.ocultar3 = !this.ocultar3;
  this.checkActiveButton();
}

accion4() {        
  this.ocultar4 = !this.ocultar4;
  this.checkActiveButton();
}

checkActiveButton() {

  if ( this.ocultar1 && this.ocultar2 && this.ocultar3 && this.ocultar4 ) {
    this.ocultartodos = true;
  }
  else if ( !this.ocultar1 && !this.ocultar2 && !this.ocultar3 && !this.ocultar4 ) {
    this.ocultartodos = false;
  }
}

acciontodos() {

  if ( this.ocultartodos === false ) {
    this.ocultar1     = true;
    this.ocultar2     = true;
    this.ocultar3     = true;
    this.ocultar4     = true;
  }
  else {
    this.ocultar1     = false;
    this.ocultar2     = false;
    this.ocultar3     = false;
    this.ocultar4     = false;
  }

  this.ocultartodos = !this.ocultartodos;
}
1
  • Muchas gracias!!! funcionó!!
    – Selzar
    Commented el 18 sept. 2017 a las 10:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.