I’m creating a checklist with items and subitems. I have a button to reset all checkboxes and I need to check if the items are all checked, but NOT the subitems.
But my checking code logs ALL the checklist boxes, not just the items.
Here is the template:
<ion-list>
<ion-item *ngFor='let listitem of checkdetail.contents; let i=index'>
<ion-label class="mainitem" *ngIf="listitem.flavour === 'item'" text-wrap>{{listitem.content}}</ion-label>
<ion-checkbox color="primary" checked="false" *ngIf="listitem.flavour === 'item'" [(ngModel)]="item_ticks[i]" (ionChange)="updateTicks()"></ion-checkbox>
<ion-label class="subitem" *ngIf="listitem.flavour === 'subitem'" text-wrap>{{listitem.content}}</ion-label>
<ion-checkbox color="secondary" checked="false" *ngIf="listitem.flavour === 'subitem'" [(ngModel)]="subitem_ticks[i]" ></ion-checkbox>
</ion-item>
</ion-list>
And here is the code:
item_ticks = [];
subitem_ticks = [];
updateTicks() {
for(var item of this.item_ticks){
console.log(item);
}
}
resetTicks() {
let alert = this.alertCtrl.create({
title: 'Reset?',
message: 'Are you sure?',
buttons: [
{
text: 'Cancel',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
},
{
text: 'Reset',
handler: () => {
for (var i = 0; i < this.item_ticks.length; i++){
this.item_ticks[i] = false;
}
for (var i = 0; i < this.subitem_ticks.length; i++){
this.subitem_ticks[i] = false;
}
let toast = this.toastCtrl.create({
message: 'Checklist reset',
duration: 1000,
position: 'top'
});
toast.present();
}
}
]
});
alert.present();
}
Why does the loop in updateTicks() log out both the this.item_ticks AND this.subitem_ticks?