CODEWITHSUNDEEP
ionic2
Handsome Programmer
Handsome Programmer

Reputation: 53

Value of checkbox does not pass to the template page

Assuming my driver has an id, how do I pass its value to the next page?

html file

<ion-item *ngFor="let driver of items; let i = index ">
            <ion-label>{{driver.name}}</ion-label>
            <ion-checkbox [(ngModel)]="driver[i]" item-right></ion-checkbox>
</ion-item>

For example, I wanna check and names and assign to another driver, I want the names to appear on the input fields but it does not appear at all

Example of the value fo the checkbox does not appear at all

ts file

initializeItems() {
        this.drivers =  [];

        this.driver.getDrivers((data)=>{
            console.log(data);

            for(let i in data.drivers){
                this.drivers.push({name: data.drivers[i].name, id: data.drivers[i].id})
            }
            this.items = this.drivers;
        })
    }

Upvotes: 1

Views: 327

Answers (1)

Prithivi Raj
Prithivi Raj

Reputation: 2736

Try with the below example. you can add a one more property to driver object to track the selection. check the working version here

home.html

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <ion-list>

  <ion-item  *ngFor="let ing of pizzaIng; let i = index">
    <ion-label>{{ing.name}}</ion-label>
    <ion-checkbox [(ngModel)]="ing.checked"  (ionChange)="updateIng()"></ion-checkbox>
  </ion-item>



</ion-list>

</ion-content>

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  pizzaIng : any;
  selectedIng : any=[];
  constructor(public navCtrl: NavController) {
    this.pizzaIng=[
      {name : "Pepperoni", checked : true},
      {name : "Sasuage", checked : true},
      {name : "Mushrooms", checked : true}
    ]
  }

  updateIng(){
    this.selectedIng=[];
    for(let ingr of this.pizzaIng){
      if(ingr.checked === true){
      this.selectedIng.push(ingr);
      }
    }
    console.log(this.selectedIng);
  }



}

Upvotes: 1

Related Questions