I have implemented the code for reading checkbox values in Ionic 2 following the answer provided. However, I encountered an error message in the console:
Cannot read property 'indexOf' of undefined
Here is my home.html code:
<form #leadsForm = "ngForm">
<ion-item>
<ion-label>Assign to: </ion-label>
<ion-select [(ngModel)]="saleRep" name="saleRep">
<ion-option *ngFor="let agency of agencyReps;let i = index;" value="{{agencyRepsIds[i]}}"> {{ agencyReps[i] }}</ion-option>
</ion-select>
</ion-item>
<button ion-button (click)="assignLeads()" block>Assign</button>
<ion-list >
<ion-item *ngFor="let t of leads;">
<h2 [ngClass]="t.status">{{t.fname}} {{t.lname}} | {{ t.status}}</span></h2>
<label>
<input type="checkbox" value="{{t}}" [checked]="cbChecked.indexOf('t') >= 0" (change)="updateCheckedOptions(t, $event)" />
</label>
</ion-item>
</ion-list>
</form>
The data for leads in *ngFor is fetched from the backend and displayed correctly.
My home.ts file looks like this:
export class Leads {
cbChecked: string[];
saleRep;
constructor() { }
updateCheckedOptions(chBox, event) {
var cbIdx = this.cbChecked.indexOf(chBox);
if(event.target.checked) {
if(cbIdx < 0 ){
this.cbChecked.push(chBox);
console.log(chBox);
}
} else {
if(cbIdx >= 0 ){
this.cbChecked.splice(cbIdx,1);
console.log(cbIdx);
}
}
}
assignLeads(){
console.log('Selected Representative',this.saleRep)
console.log('CheckBox Value',this.cbChecked);
}
}
Thank you.