CheckBox calling button with ionic 2

Question

CheckBox calling button with ionic 2

Navigation

#1 by (0 votes)

0

I am simulating something like a shopping cart using ionic 2 . Basically you write the name of the item and the value and it will create a list with checkbox as in the image below.

ButIwantedthe only appeared when selecting one of the checkboxes and did not stay static on the screen as it is now. How can I do this?

grid calling CheckBox:

<ion-grid>
    <ion-row *ngFor="let item of produto">
      <ion-item>
        <ion-label (click)="clicou(item.desc)">
          {{ item.desc }} {{ item.valor }}
        </ion-label>
        <ion-checkbox checked="false"></ion-checkbox>
      </ion-item>
    </ion-row>
  </ion-grid>

part that arrow or button in code:

<button ion-button block (click)="remove()" color="danger" style="transition: none 0s ease 0s;">
    <span class="button-inner">
      <ion-icon name="close"></ion-icon>
      Remover Selecionados
    </span>
    <div class="button-effect"></div>
  </button>

ionic ionic2

asked by anonymous 08.08.2018 / 21:33

1 answer

Manipulate array in mysql with procedures How to make a request and search for a string

score 0 · Accepted Answer

Add (ionChange) by calling a function and passing $event and item as the parameter. Within its function it will be necessary to load the selected items into a vector and set the variable selecionado to true to show the button. After this, it is also necessary to check if any item has been deselected and it is necessary to remove the item from the vector of selected items. If the vector is completely empty, it points to the variable bool selecionado as false and then the button disappears.

In your .ts component

export class componente {
  private produtos: any = [
    {nome: "sabao", valor: "10"},
    {nome: "miojo", valor: "12"},
    {nome: "pasta", valor: "15"},
    {nome: "cup nudes", valor: "14"}
  ]
  private itensSelecionados: any [] = [];
  private selecionado: boolean = false;
  constructor(){}

  datachanged(e:any, item: any){
    if(e.checked){
      for (let x = 0; x < this.produtos.length; x++) {
        if(this.produtos[x].nome == item.nome){
          this.itensSelecionados.push(item);
          this.selecionado = true;   
        }      
      }
    }
    else{
      for (let x = 0; x < this.itensSelecionados.length; x++) {
        if(this.itensSelecionados[x].nome == item.nome){
          this.itensSelecionados.splice(x,1);
          if(this.itensSelecionados.length == 0){
            this.selecionado = false;
            return false;
          }
        }        
      }
    }
  }

On your grid.

    <ion-content padding>
  <ion-grid>
    <ion-row *ngFor="let item of produtos">
      <ion-item>
        <ion-label>
          {{ item.nome }} {{ item.valor }}
        </ion-label>
        <ion-checkbox checked="false" (ionChange)="datachanged($event, item)"></ion-checkbox>
      </ion-item>
    </ion-row>
  </ion-grid>
</ion-content>

On your button

 <ion-footer>
  <button *ngIf="selecionado" (click)="remove()" ion-button block color="danger" style="transition: none 0s ease 0s;">
    <span><ion-icon name="close"></ion-icon>Remover Selecionados</span>
  </button>
</ion-footer>

This solves your problem by simply adjusting your code.