Select only 1 radio button with ionic

Question

Select only 1 radio button with ionic

Navigation

#1 by (0 votes)

0

I'm trying to render some radio buttons using *ngFor and only I can select either the first or the last option, never the middle options. >

I have the following array :

[
   {
     "title": "First question",
     "options": [
       {
         "title": "Title 1",
          "correct": 0
        },
        {
         "title": "Title 2",
          "correct": 0
        },
        {
         "title": "Title 3",
          "correct": 0
        },
        {
         "title": "Title 4",
          "correct": 1
        },
     ]
   }
]

<ion-card *ngFor="let question of questions">
  <ion-card-content>
    <form>
      {{ question.title }}
      <ion-list radio-group>

        <ion-item *ngFor="let option of question.options">
          <ion-label>{{ option.title }}</ion-label>
          <ion-radio [value]="option.correct"></ion-radio>
        </ion-item>

      </ion-list>

      <button ion-button secondary full>Next question</button>
    </form>
  </ion-card-content>
</ion-card>

In the example above, even if I render all radio buttons I can only select Title 1 or Title 4

javascript ionic angular

asked by anonymous 09.08.2017 / 19:09

1 answer

My while closing before it really should how do you call a javascript function on all buttons with a class

score 0 · Answer 1

In this case you will need to put the ion-radio group in a radio-group:

 <ion-list radio-group>
        <ion-item *ngFor="let item of items">
          <ion-label>{{item.cond}}</ion-label>
          <ion-radio [value]="item.host" (click)="inserirCondominio(item)"></ion-radio>
        </ion-item>
      </ion-list>