Ir para conteúdo
  • 0
Diego Estacho

Capturar itens de um checkbox e enviar a um array

Pergunta

Pessoal boa tarde, eu estou construindo uma aplicação de vendas pelo ionic3, e estou com o seguinte problema.

Tenho a tela de vendas, aonde eu faço a exibição dos produtos através de um botão, esse botão me gera uma lista de itens vinda do firebase.

Cada item, tem um checkbox para marcar, ou seja o usuário poderá marcar 1 ou 10 itens por exemplo. No final da seleção, tenho um botão com nome de 

ESCOLHER, esse chama uma função que irá capturar os itens que o usuário marcou para que eu possa manipular e enviar ao banco de dados. 

Porém ao executar esta função, e testar pelo console.log ele não está me retornando nada, alguém pode me passar alguma dica ?

 

//MINHA FUNÇÃO
 
escolherProdutos(){
let produtosEscolhidos = [];
for(let i=0; i < this.produtosLista.length; i++){
if(this.produtosLista[i].selecionado){
produtosEscolhidos.push(this.produtosLista[i]);
}
}
console.log("Os produtos escolhidos são " +produtosEscolhidos);
 
 
//FUNÇÃO QUE TESTEI, E ESTÁ FAZENDO A CAPTURA DO OBJETO PRODUTO (APENAS 1 PRODUTO)
produtoEscolhido(produto){
this.produtoSelecionado = produto;
this.produtoDescricao = this.produtoSelecionado.descricao;
console.log(this.produtoSelecionado);
}
 
//MEU HTML

<ion-item>

<ion-label fixed class="label-format">Escolha os itens</ion-label>

</ion-item>

<button ion-button color="dark" class="botao-pesquisar" (click)="exibirItens()">

<ion-icon name="arrow-dropdown"></ion-icon>

</button>

<div *ngIf="botaoProdutos">

<ion-list *ngFor="let produto of produtosLista | async">

<ion-item>

<ion-label>{{produto.descricao}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{produto.preco}}</ion-label>

<ion-checkbox [(ngModel)]="selecionado" (ionChange)="produtoEscolhido(produto)"></ion-checkbox>

<ion-input type="number" placeholder="Qtd" color="dark"></ion-input>

</ion-item>

</ion-list>

<button ion-button color="dark" (click)="escolherProdutos()">Escolher</button>

</div>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

1 resposta a esta questão

Recommended Posts

  • 0
Em 31/08/2018 at 17:19, Diego Estacho disse:

Pessoal boa tarde, eu estou construindo uma aplicação de vendas pelo ionic3, e estou com o seguinte problema.

Tenho a tela de vendas, aonde eu faço a exibição dos produtos através de um botão, esse botão me gera uma lista de itens vinda do firebase.

Cada item, tem um checkbox para marcar, ou seja o usuário poderá marcar 1 ou 10 itens por exemplo. No final da seleção, tenho um botão com nome de 

ESCOLHER, esse chama uma função que irá capturar os itens que o usuário marcou para que eu possa manipular e enviar ao banco de dados. 

Porém ao executar esta função, e testar pelo console.log ele não está me retornando nada, alguém pode me passar alguma dica ?

 

//MINHA FUNÇÃO
 
escolherProdutos(){
let produtosEscolhidos = [];
for(let i=0; i < this.produtosLista.length; i++){
if(this.produtosLista[i].selecionado){
produtosEscolhidos.push(this.produtosLista[i]);
}
}
console.log("Os produtos escolhidos são " +produtosEscolhidos);
 
 
//FUNÇÃO QUE TESTEI, E ESTÁ FAZENDO A CAPTURA DO OBJETO PRODUTO (APENAS 1 PRODUTO)
produtoEscolhido(produto){
this.produtoSelecionado = produto;
this.produtoDescricao = this.produtoSelecionado.descricao;
console.log(this.produtoSelecionado);
}
 
//MEU HTML

<ion-item>

<ion-label fixed class="label-format">Escolha os itens</ion-label>

</ion-item>

<button ion-button color="dark" class="botao-pesquisar" (click)="exibirItens()">

<ion-icon name="arrow-dropdown"></ion-icon>

</button>

<div *ngIf="botaoProdutos">

<ion-list *ngFor="let produto of produtosLista | async">

<ion-item>

<ion-label>{{produto.descricao}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{produto.preco}}</ion-label>

<ion-checkbox [(ngModel)]="selecionado" (ionChange)="produtoEscolhido(produto)"></ion-checkbox>

<ion-input type="number" placeholder="Qtd" color="dark"></ion-input>

</ion-item>

</ion-list>

<button ion-button color="dark" (click)="escolherProdutos()">Escolher</button>

</div>

 

 Olá Diego, tudo bem?

Fiz algo parecido não foi no IONC mas acho que pode ajudar.

foreach (itens as item){

  <input type="checkbox" id="item<?php echo($item["codigo"]); ?>" name="check_list_item[]" value="<?php echo($item["codigo"]); ?>"  /> Nome Item

}

no name você cira um array assim todos os itens selecionados iram para esse array.

Depois é só fazer um foreach nesse array e ir salvando.

 

 

Esperto ter ajudado.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Edgard Hufelande
      Estou desenvolvendo um app que será aberto ao público pra atender a necessidade de um município...
      As senhas no banco estou salvando criptografadas usando Bcrypt, porém tenho uma dúvida no lado cliente, tenho uma API Rest
      para comunicação entre o app e o servidor, no momento do login ou do cadastro eu já deveria enviar essa senha criptografada na
      requisição ou envio a senha normal e criptografo no lado do servidor?
       
      Resumindo, não quero uma solução, quero uma sugestão sobre se devo criptografar a senha no lado cliente ou no lado servidor.
       
      Desde já grato pela atenção.
    • Por JuninhoDrak
      O problema é: eu quero estabelecer comunicação entre o meu desktop e meu dispositivo inteligente android.
      Estou tentando um passo simples mas recebo "device not found" como retorno
      é aqui que baseio minha codificação: 
      https://ionicframework.com/docs/native/serial/
       
      Este é o código

       
       
      Há poucos conteúdo sobre esse recurso na internet.
       
    • Por Mxxll
      Estou começando agora. tenho dois códigos PHP. Um envia uma imagem e o outro algumas informações. Ambos de um aplicativo feito em IONIC.
      Teria como juntar esses dois códigos para que faça apenas um insert?
       
      Código que insere informações
      <?php header("Access-Control-Allow-Origin: *"); header("Access-Control-Allow-Headers: Content-Type"); header("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, DELETE"); include "db.php"; $input = file_get_contents('php://input'); $data = json_decode($input,true); $message = array(); if($data['action'] == "insert"){ $motivo = $data['motivo']; $horario = $data['horario']; $q = mysqli_query($con,"INSERT INTO `imovel` (`motivo`, `horario`) VALUES ('$motivo', '$horario')"); if($q){ $message['status'] = "success"; } else{ $message['status'] = "error"; } echo json_encode($message); } echo mysqli_error($con); ?>  
       
       
      Código de inserir imagem:
      <?php include '../ionx/db.php'; $target_dir = "images/"; $target_file = $target_dir . basename($_FILES["photo"]["name"]); $imagename = basename($_FILES["photo"]["name"]); $uploadOk = 1; $imageFileType = pathinfo($target_file,PATHINFO_EXTENSION); $check = getimagesize($_FILES["photo"]["tmp_name"]); if($check !== false) { echo "Arquivo é uma imagem - " . $check["mime"] . "."; $uploadOk = 1; if (move_uploaded_file($_FILES["photo"]["tmp_name"], $target_file)) { $q = mysqli_query($con,"INSERT INTO `imovel` (`imagem`) VALUES ('$imagename')"); } else { echo "Ocorreu um erro"; } } else { echo "Arquivo não é uma imagem"; $uploadOk = 0; } ?>  
      Há alguma maneira de unir esses dois códigos para que eu consiga inserir a informação digitada e a imagem na tabela?
    • Por luiz_paulo_andrade
      Estou desenvolvendo um app com ionic que tem uma página webview dentro de um iframe, nessa webview existe um botão de download que funciona normalmente no browser, mas no android não funciona. Creio que o Android esteja bloqueando esse download, gostaria de saber como habilitar para que o download seja feito diretamente, como faz no browser.
    • Por reinaldo054
      Eu estou criando um aplicativo em que embaixo do conteúdo da página eu tenho a opção do usuário fazer um comentário. Estou usando o firebase para fazer cadastro e login e já até consegui gravar a mensagem no banco de dados, mas só ela, precisava colocar o nome do usuário ou username, e a data que o comentário foi feito.

      ------------------ Meu html está assim:

       
      <ion-content #content id="content"> <ion-card *ngFor="let message of messages"> <ion-card-header> {{message.nome}} </ion-card-header> <ion-card-content> {{message.mensagem}} </ion-card-content> <ion-footer> <ion-toolbar> <ion-input placeholder="Comente algo..." [(ngModel)]="message"></ion-input> <ion-buttons end> <button ion-button icon-right (click)="sendMessage()"> Enviar <ion-icon name="send"></ion-icon> </button> </ion-buttons>
      --------------------------meu ts está assim:
       
      export class Cap1SegObsPage { @ViewChild("content") content: any; username: string message: string = "" messages = []; constructor(public navCtrl: NavController) { this.getMessages(); } getMessages(){ var messagesRef = firebase.database().ref().child("mensSegObsCap1"); messagesRef.on("value", (snap) => { var data = snap.val(); this.messages = []; for(var key in data){ this.messages.push(data[key]); } this.scrollToBottom(); }); } scrollToBottom(){ var contentEnd = document.getElementById("content-end").offsetTop; this.content.scrollTo(0, contentEnd, 300); } sendMessage(){ var messagesRef = firebase.database().ref().child("mensSegObsCap1"); messagesRef.push({mensagem: this.message, nome: this.username}); this.message = ""; } }  
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.