Ion item with checkbox

Ionic Framework ionic-v3
1

Hello, I want to get a list of states with two ckeckbox inside each item, for eg ; a list of company and every company has two checkbox : SMS and Email.
I try this code, but it doesn’t work perfectly:

<ion-content padding>
    <ion-grid>
      <ion-list>

        <ion-row>
          <ion-item *ngFor="let gp of groups">
            <ion-label> {{gp}}</ion-label>
          </ion-item>
          <ion-grid>
            <ion-row>
              <ion-col col-md-3>
                <ion-label>SMS</ion-label>
                <ion-checkbox [(ngModel)]="sms"></ion-checkbox>
              </ion-col>
              <ion-col col-md-3>
                <ion-label>Email</ion-label>
                <ion-checkbox [(ngModel)]="email"></ion-checkbox>
              </ion-col>
            </ion-row>
          </ion-grid>
        </ion-row>
       
      </ion-list>
    </ion-grid>

</ion-content>

This is what I get :
cap

2

Move your ngFor to:

<ion-content padding>
    <ion-grid>
      <ion-list>

        <ion-row *ngFor="let gp of groups">
          <ion-item >
            <ion-label> {{gp}}</ion-label>
          </ion-item>
          <ion-grid>
            <ion-row>
              <ion-col col-md-3>
                <ion-label>SMS</ion-label>
                <ion-checkbox [(ngModel)]="sms"></ion-checkbox>
              </ion-col>
              <ion-col col-md-3>
                <ion-label>Email</ion-label>
                <ion-checkbox [(ngModel)]="email"></ion-checkbox>
              </ion-col>
            </ion-row>
          </ion-grid>
        </ion-row>
       
      </ion-list>
    </ion-grid>

</ion-content>
3

Thank you so much.
But I have an other question, can I get the selected item without ngModel??

4

Why not ngModel?
What are you trying to do?

5

Hello, with the previous code, if I choose sms of one item, all the items will be selected.
This is what I get:
not
when I deleted ngModel, only one item is selected.

6

Bind to something underneath each group in order to separate them, instead of binding to an object property of the controller itself.

7

Hello, Thank you for your help.
I tried to apply your advice, but I’m still stuck. This is the html:

<ion-content padding>
    <ion-grid >
      <ion-list >
        <ion-row *ngFor="let state of states" ([ngModel])="notifMode">
          <ion-item >
            <ion-label> {{state}}</ion-label>
          </ion-item>
          <ion-grid >
            <ion-row item-content>
              <ion-col col-md-3 class="align-text-middle">
                <ion-label  >SMS</ion-label>
                <ion-checkbox (ionChange)="onChangeSms()"  ></ion-checkbox>
              </ion-col>
              <ion-col col-md-3 class="align-text-middle">
                <ion-label >Email</ion-label>
                <ion-checkbox (ionChange)="onChangeEmail()" ></ion-checkbox>
              </ion-col>
            </ion-row>
          </ion-grid>
        </ion-row>
      </ion-list>
    </ion-grid>
    <button ion-button outline  (click)="setNotifMode()">Next</button>
</ion-content>

this is the component

notifMode : NotifMode;
 smsChecked : boolean ;
 emailChecked : boolean ;
constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.getStates();
  }
onChangeSms() {
    this.smsChecked = !this.smsChecked;
    console.log('sms checked:' + this.smsChecked);
   }

  onChangeEmail() {    
   this.emailChecked = !this.emailChecked;
    console.log('email checked:' + this.emailChecked);
   }
setNotifMode(){
    for(let state of this.states){
      let obj = {
        "state" : state,
        "sms" : this.smsChecked,
        "email" : this.emailChecked,
      }
      this.notifMode = obj;
      console.log(this.notifMode);
    }
  }

But I got always this pb:
capt
the result in the console:
capty

8

any help please :worried: