我想在Ionic2的radio-group中的(ionChange)事件中获取所选的单选按钮值。
我的Html代码是
<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>
如何在(离子变化)mcqQuesiton()中获得离子无线电值。
我在一个页面上有数字或无线电组,因为它是一个多选题页。
答案 0 :(得分:12)
您可以使用<ion-radio>
...
<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>
...
事件传递值。
mcqAnswer(questionID,answer){
...
}
在你的打字稿(.ts)文件中,它将类似于
CombinationValue result = CombinationValue.OnePawn | CombinationValue.TwoPawns;
答案 1 :(得分:8)
您可以将$ event传递给onChange方法。 E.g。
在你的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>
在你的打字稿中:
function mcqAnswer(value)
{
console.log(value);
}
答案 2 :(得分:0)
有两种方法。一种是使用ionSelect。下面是一个示例
<ion-item >
<ion-label><h2>You entered:</h2>
</ion-label>
<ion-radio color="success" slot="start" [value]="enteredAddress" (ionSelect)="populateSuggestion($event)"></ion-radio>
</ion-item>
<ion-item>
<ion-label><h2>Suggested Address:</h2>
</ion-label>
<ion-radio color="success" slot="start" [value]="suggestedAddress" (ionSelect)="populateSuggestion($event)" ></ion-radio>
</ion-item>
</ion-radio-group>
方法2是使用ViewChild访问本机DOM元素。 的HTML: ts: @ViewChild('radio',{阅读:ElementRef,静态:false})radio:ElementRef;
答案 3 :(得分:-1)
选择类别
<ion-item *ngFor="let category of subcategories; let index=index;">
<ion-label>{{category}}</ion-label>
<ion-radio [value]="category"></ion-radio>
</ion-item>
在您的.ts
文件中:
selectedValue($event){
console.log($event);
}
答案 4 :(得分:-2)
使用(更改)事件
<ion-list radio-group [(ngModel)]="pet" (change)="petChange($event)">
<ion-item>
<ion-radio checked (select)="dogSelect($event)"></ion-radio>
<ion-label>Dogs</ion-label>