CODEWITHSUNDEEP
angulartypescriptionic2radio-buttonionic3
user33276346
user33276346

Reputation: 1759

Last ion-radio is always selected

I have a list of people and for each, I need to check if they are alive, dead or are zombis (all radios in the same line). The problem is that if I use the code below, zombi is always selected with no chance to change it. How can I make it work as needed?

    <ion-list radio-group [(ngModel)]="person1">
      <ion-item>
        <ion-label>Alice</ion-label>
        <ion-radio value="alive"></ion-radio>
        <ion-radio value="dead"></ion-radio>
        <ion-radio value="zombi"></ion-radio>
      </ion-item>
    </ion-list>

Upvotes: 1

Views: 154

Answers (1)

sebaferreras
sebaferreras

Reputation: 44669

If you want to place all the radio items in the same row, you can use ion-row and ion-col elements like this:

 <ion-row radio-group [(ngModel)]="person1">
    <ion-col>
      <ion-item>
        Alice
      </ion-item>
    </ion-col>
    <ion-col>
      <ion-item>
        <ion-label>Alive</ion-label>
        <ion-radio value="alive"></ion-radio>
      </ion-item>
    </ion-col>
    <ion-col>
      <ion-item>
       <ion-label>Dead</ion-label>
        <ion-radio value="dead"></ion-radio>
      </ion-item>
    </ion-col>
    <ion-col>
      <ion-item>
       <ion-label>Zombie</ion-label>
        <ion-radio value="zombie"></ion-radio>
      </ion-item>
    </ion-col>
  </ion-row>

Upvotes: 1

Related Questions