Jump to content
  • 0
Diego Estacho

Capturar itens de um checkbox e enviar a um array

Question

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>

 

Share this post


Link to post
Share on other sites

1 answer to this question

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Kellison Ruan
      Olá galera, Boa tarde!
      Estou com um probleminha em Ionic que está quebrando muito minha cabeça por dias.
      Método de pagamento do paypal aparece em meu site, mas não aparece no app ionic, o que será? Já tentei de tudo. Esse app faz comunicação via API do Woocommerce, e lá está habilitado a forma de pagamento com PayPal, porém só não aparece no app, já que na página de checkout no meu site, aparece.
       
      Segue o código da página de checkout do app:
       
      import { Component, Inject } from '@angular/core'; import { NavController, NavParams, AlertController, Loading, LoadingController, ToastController, App } from 'ionic-angular'; import { PlacedPage } from '../placed/placed'; import { PaymentGateway } from "../../models/payment-gateway.models"; import { Constants } from "../../models/constants.models"; import { WordpressClient } from '../../providers/wordpress-client.service'; import { Global } from '../../providers/global'; import { Subscription } from "rxjs/Subscription"; import { CartItem } from "../../models/cart-item.models"; import { OrderRequest } from "../../models/order-request.models"; import { Address } from "../../models/address.models"; import { ShippingLine } from "../../models/shipping-line.models"; import { UserResponse } from "../../models/user-response.models"; import { OrderResponse } from "../../models/order-response.models"; import { Currency } from "../../models/currency.models"; import { InAppBrowser, InAppBrowserOptions } from '@ionic-native/in-app-browser'; import { sha512 } from 'js-sha512'; import { APP_CONFIG, AppConfig } from '../../app/app.config'; import { OrderUpdateRequest } from '../../models/order-update-request.models'; import { Coupon } from '../../models/coupon.models'; import { HomePage } from '../home/home'; import { TranslateService } from '@ngx-translate/core'; import { Helper } from '../../models/helper.models'; import { ShippingMethod } from '../../models/shipping-method.models'; import { PayPal, PayPalPayment, PayPalConfiguration, PayPalPaymentDetails } from '@ionic-native/paypal'; @Component({ selector: 'page-payment', templateUrl: 'payment.html', providers: [WordpressClient] }) export class PaymentPage { private loading: Loading; private loadingShown: Boolean = false; private placedPagePushed: Boolean = false; private paymentDone: Boolean = false; private paymentFailAlerted: Boolean = false; private subscriptions: Array<Subscription> = []; private paymentGateways = new Array<PaymentGateway>(); private cartItems: Array<CartItem>; private selectedPaymentGateway; private selectedAddress: Address; private orderRequest: OrderRequest; private orderId = -1; private user: UserResponse; private totalItems = 0; private total = 0; private couponApplied = false; private pickupTime = 0; private deliveryTime = 0; private shippingChargeGlobal: number; constructor(@Inject(APP_CONFIG) private config: AppConfig, public translate: TranslateService, private iab: InAppBrowser, private toastCtrl: ToastController, public navCtrl: NavController, private navParams: NavParams, private service: WordpressClient, private loadingCtrl: LoadingController, private alertCtrl: AlertController, public appCtrl: App) { this.cartItems = this.navParams.get('cart'); this.totalItems = this.navParams.get('totalItems'); this.total = this.navParams.get('total'); this.shippingChargeGlobal = this.navParams.get('shippingChargeGlobal'); let paymentGateways = JSON.parse(window.localStorage.getItem(Constants.PAYMENT_GATEWAYS)); this.selectedAddress = JSON.parse(window.localStorage.getItem(Constants.SELECTED_ADDRESS)); if (paymentGateways != null) { for (let pg of paymentGateways) { if (pg.enabled && this.paymentImplemented(pg.id)) { this.paymentGateways.push(pg); } } } } ionViewWillLeave() { this.subscriptions.forEach((subscription: Subscription) => { subscription.unsubscribe(); }); this.dismissLoading(); } paymentImplemented(id) { return id === "pumcp" || id === "payuindia" || id === "cod"; } paymentMethod(paymentGateway) { this.selectedPaymentGateway = paymentGateway; } placedPage() { if (this.selectedPaymentGateway == null) { this.translate.get('field_error_payment_method').subscribe(value => { this.showToast(value); }); } else { this.orderRequest = new OrderRequest(); this.orderRequest.payment_method = this.selectedPaymentGateway.id ? this.selectedPaymentGateway.id : "cod"; this.orderRequest.payment_method_title = this.selectedPaymentGateway.title ? this.selectedPaymentGateway.title : "cod"; this.orderRequest.set_paid = false; this.orderRequest.billing = this.selectedAddress; this.orderRequest.shipping = this.selectedAddress; this.user = JSON.parse(window.localStorage.getItem(Constants.USER_KEY)); this.orderRequest.customer_id = String(this.user.id); let selectedShippingMethod: ShippingMethod = JSON.parse(window.localStorage.getItem(Constants.SELECTED_SHIPPING_METHOD)); if (selectedShippingMethod) { let shippingTotal = 0; for (let ci of this.cartItems) { if (!ci.product.shipping_cost_use_global && ci.product.shipping_cost != 1) shippingTotal = shippingTotal + ci.product.shipping_cost; } if (this.shippingChargeGlobal != -1) { shippingTotal = shippingTotal + this.shippingChargeGlobal; } this.orderRequest.shipping_lines = new Array<ShippingLine>(); this.orderRequest.shipping_lines.push(new ShippingLine(selectedShippingMethod.method_id, selectedShippingMethod.method_title, String(shippingTotal))); } this.orderRequest.line_items = this.cartItems; for (let item of this.orderRequest.line_items) { item.product = null; } this.translate.get('order_creating').subscribe(value => { this.presentLoading(value); }); let coupon: Coupon = JSON.parse(window.localStorage.getItem(Constants.SELECTED_COUPON)); let subscription: Subscription = this.service.createOrder(window.localStorage.getItem(Constants.ADMIN_API_KEY), this.orderRequest).subscribe(data => { this.orderId = data.id; if (coupon) { this.applyCoupon(coupon); } else { this.orderPlaced(); } }, err => { console.log(err); this.dismissLoading(); let orderId = Helper.extractOrderIdFromError(err); if (orderId != -1) { this.orderId = orderId; if (coupon) { this.applyCoupon(coupon); } else { this.orderPlaced(); } } else { this.translate.get('order_failed').subscribe(value => { this.showToast(value); }); this.appCtrl.getRootNav().setRoot(HomePage); } }); this.subscriptions.push(subscription); } } applyCoupon(coupon) { let couponSubs: Subscription = this.service.applyCouponCode(window.localStorage.getItem(Constants.ADMIN_API_KEY), String(this.orderId), coupon.code).subscribe(data => { this.couponApplied = true; window.localStorage.removeItem(Constants.SELECTED_COUPON); this.translate.get('confirm_order_coupon_applied').subscribe(value => { this.showToast(value); }); this.orderPlaced(); }, err => { console.log(err); this.dismissLoading(); }); this.subscriptions.push(couponSubs); } orderPlaced() { this.dismissLoading(); if (this.selectedPaymentGateway.id && this.selectedPaymentGateway.id === "cod") { this.clearCart(); this.navCtrl.setRoot(PlacedPage); } else if (this.selectedPaymentGateway.id === "pumcp" || this.selectedPaymentGateway.id === "payuindia") { this.initPayUMoney(); } else { this.translate.get('order_placed_cod').subscribe(value => { this.showToast(value); }); this.clearCart(); this.navCtrl.setRoot(PlacedPage); } } initPayUMoney() { let name = this.user.first_name && this.user.first_name.length ? this.user.first_name : this.user.username; let mobile = this.user.username; let email = this.user.email; let bookingId = String(Math.floor(Math.random() * (99 - 10 + 1) + 10)) + this.orderId; let productinfo = this.orderId; let salt = this.config.payuSalt; let key = this.config.payuKey; let amt = this.couponApplied ? this.total : this.totalItems; let string = key + '|' + bookingId + '|' + amt + '|' + productinfo + '|' + name + '|' + email + '|||||||||||' + salt; let encrypttext = sha512(string); //let url = "payumoney/payuBiz.html?amt=" + amt + "&name=" + name + "&mobileNo=" + mobile + "&email=" + email + "&bookingId=" + bookingId + "&productinfo=" + productinfo + "&salt=" + salt + "&key=" + key; let url = "payumoney/payuBiz.html?amt=" + amt + "&name=" + name + "&mobileNo=" + mobile + "&email=" + email + "&bookingId=" + bookingId + "&productinfo=" + productinfo + "&hash=" + encrypttext + "&salt=" + salt + "&key=" + key; let options: InAppBrowserOptions = { location: 'yes', clearcache: 'yes', zoom: 'yes', toolbar: 'no', closebuttoncaption: 'back' }; const browser: any = this.iab.create(url, '_blank', options); browser.on('loadstop').subscribe(event => { browser.executeScript({ file: "payumoney/payumoneyPaymentGateway.js" }); if (event.url == "http://localhost/success.php") { this.paymentSuccess(); browser.close(); } if (event.url == "http://localhost/failure.php") { this.paymentFailure(); browser.close(); } }); browser.on('exit').subscribe(event => { if (!this.paymentDone && !this.paymentFailAlerted) { this.paymentFailure(); } }); browser.on('loaderror').subscribe(event => { this.showToast('something_went_wrong'); }); } paymentFailure() { this.paymentFailAlerted = true; let subscription: Subscription = this.service.updateOrder(window.localStorage.getItem(Constants.ADMIN_API_KEY), String(this.orderId), new OrderUpdateRequest('cancelled')).subscribe(data => { }, err => { console.log(err); }); this.subscriptions.push(subscription); this.translate.get(['payment_fail_title', 'payment_fail_message', 'ok']).subscribe(res => { let alert = this.alertCtrl.create({ title: res.payment_fail_title, message: res.payment_fail_message, buttons: [{ text: res.ok, role: 'cancel', handler: () => { this.done(); console.log('Okay clicked'); } }] }); alert.present(); }); } paymentSuccess() { this.paymentDone = true; this.clearCart(); this.translate.get('just_a_moment').subscribe(value => { this.presentLoading(value); }); let subscription: Subscription = this.service.updateOrder(window.localStorage.getItem(Constants.ADMIN_API_KEY), String(this.orderId), { set_paid: true }).subscribe(data => { this.done(); }, err => { this.done(); this.paymentSuccess(); console.log(err); }); this.subscriptions.push(subscription); } done() { if (!this.placedPagePushed) { this.placedPagePushed = true; this.dismissLoading(); this.appCtrl.getRootNav().setRoot(this.paymentFailAlerted ? HomePage : PlacedPage); } } private presentLoading(message: string) { this.loading = this.loadingCtrl.create({ content: message }); this.loading.onDidDismiss(() => { }); this.loading.present(); this.loadingShown = true; } private dismissLoading() { if (this.loadingShown) { this.loadingShown = false; this.loading.dismiss(); } } private presentErrorAlert(msg: string) { let alert = this.alertCtrl.create({ title: 'Error', subTitle: msg, buttons: ['OK'] }); alert.present(); } showToast(message: string) { let toast = this.toastCtrl.create({ message: message, duration: 3000, position: 'bottom' }); toast.onDidDismiss(() => { console.log('Dismissed toast'); }); toast.present(); } clearCart() { let cartItems = new Array<CartItem>(); window.localStorage.setItem('cartItems', JSON.stringify(cartItems)); } }  
    • By 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.
    • By 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.
       
    • By 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?
    • By 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.
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.