0

Estou simulando algo parecido com um carrinho de compras utilizando ionic 2. Basicamente você escreve o nome do item e o valor e vai criando uma lista com checkbox como na imagem abaixo.

inserir a descrição da imagem aqui

Porém eu queria que a opção inserir a descrição da imagem aqui só aparecesse ao selecionar uma das checkbox e não ficasse estático na tela como está agora. Como posso fazer isso?

grid chamando as 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>

parte que seta o button no código:

<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>
2
  • Conseguiu resolver o problema?
    – viana
    Commented 14/08/2018 às 17:25
  • @Viana parte dele sim
    – SHRIMP
    Commented 14/08/2018 às 17:29

1 Resposta 1

0
+50

Adicione o (ionChange) chamando uma função e passando como parametro o $event e o item. Dentro da sua função será necessário carregar num vetor os itens selecionados e setar a a variavel selecionado como true para mostrar o botão. Após isso, é necessario tambem verificar se algum item foi deselecionado e é necessario tirar o item do vetor de itens selecionados. Se o vetor estiver totalmente vazio, ele seta o a variavel bool selecionado como false e então o botão some.

No seu componente.ts

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;
          }
        }        
      }
    }
  }

No seu 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>

No seu botão


 <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>

Isso resolve o seu problema, basta ajustar o seu código.

17
  • Ola amigo, copiei e colei como voce fez mas o meu botão nao ta aparecendo quando seleciono a checkbox
    – SHRIMP
    Commented 10/08/2018 às 18:36
  • qual a sua versão do angular?
    – jraspante
    Commented 10/08/2018 às 18:59
  • 2. Eu peguei o que vc mandou e coloquei em cima do meu código antigo
    – SHRIMP
    Commented 10/08/2018 às 19:00
  • poderia postar como está o seu .ts?
    – jraspante
    Commented 10/08/2018 às 19:08
  • codepen.io/anon/pen/QBYyOY coloquei aqui só pra voce poder visualizar como está
    – SHRIMP
    Commented 10/08/2018 às 19:10

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .