web-dev-qa-db-fra.com

Obtention de la valeur du bouton radio sélectionné, activé (ionChange) dans le groupe radio, ionic2

Je veux obtenir la valeur du bouton radio sélectionné, sur l'événement (ionChange) dans le groupe radio dans Ionic2.

Mon code Html est

<ion-list radio-group *ngFor="let question of mcqData; let i= index;" (ionChange)="mcqAnswer(i)">
  <ion-list-header>
    {{question.questionText}}
  </ion-list-header>

  <ion-item>
    <ion-label>{{question.optionA}}</ion-label>
    <ion-radio  value="1"></ion-radio>
  </ion-item>

  <ion-item>
    <ion-label>{{question.optionB}}</ion-label>
    <ion-radio  value="2"></ion-radio>
  </ion-item>

  <ion-item>
    <ion-label>{{question.optionC}}</ion-label>
    <ion-radio  value="3"></ion-radio>
  </ion-item>

  <ion-item>
    <ion-label>{{question.optionD}}</ion-label>
    <ion-radio  value="4"></ion-radio>
  </ion-item>
</ion-list>

Comment puis-je obtenir la valeur radio ionique dans mcqQuesiton () sur (changement d'ions).

J'ai un numéro ou des groupes radio sur une seule page, car il s'agit d'une page de questions à choix multiples.

ionic2
14
raju

Vous pouvez utiliser ionSelect événement de <ion-radio> pour passer la valeur.

...
  <ion-item>
    <ion-label>{{question.optionA}}</ion-label>
    <ion-radio  value="1" (ionSelect)="mcqAnswer(i,1)"></ion-radio>
  </ion-item>
  <ion-item>
    <ion-label>{{question.optionB}}</ion-label>
    <ion-radio  value="2" (ionSelect)="mcqAnswer(i,2)"></ion-radio>
  </ion-item>
...

Dans votre fichier TypeScript (.ts), ce sera quelque chose comme

mcqAnswer(questionID,answer){
...
}
12
AwesomeGeek

Vous pouvez passer par $ event à votre méthode onChange. Par exemple.

Dans votre html:

<ion-list radio-group *ngFor="let question of mcqData; let i= index;" (ionChange)="mcqAnswer($event)">
  <ion-list-header>
    {{question.questionText}}
  </ion-list-header>

  <ion-item>
    <ion-label>{{question.optionA}}</ion-label>
    <ion-radio  value="1"></ion-radio>
  </ion-item>

  <ion-item>
    <ion-label>{{question.optionB}}</ion-label>
    <ion-radio  value="2"></ion-radio>
  </ion-item>

  <ion-item>
    <ion-label>{{question.optionC}}</ion-label>
    <ion-radio  value="3"></ion-radio>
  </ion-item>

  <ion-item>
    <ion-label>{{question.optionD}}</ion-label>
    <ion-radio  value="4"></ion-radio>
  </ion-item>
</ion-list>

Dans votre TypeScript:

function mcqAnswer(value)
{
   console.log(value);
}
9
TomS