How to checked radio button in IONIC? - angularjs

Question

How to set checked/default radio button value in IONIC?
I have code like below:
<ul>
<li ng-repeat="quest in Questions">
{{quest.question}}
<div ng-repeat="choice in quest.jawaban" ng-init="answer[quest.no]='A'">
<input
type="radio"
ng-model="answer[quest.no]"
ng-value="'{{choice.pil}}~{{choice.jawaban}}'"
name="{{quest.no}}">
{{choice.jawaban}}
</div>
<br>
</li>
</ul>
ng-init="answer[quest.no]='A'"
I need replace 'A' to "selected" value from database simulate like below
$scope.Questions = [{"no":"1","qus_id":"AI1a","question":"Pilih buah kesukaan:","selected":"A","jawaban":[{"pil":"A","jawaban":"Pepaya"},{"pil":"B","jawaban":"Mangga"},{"pil":"C","jawaban":"Pisang"},{"pil":"D","jawaban":"Jambu"}]},{"no":"2","qus_id":"AI1b","question":"Warna Favorit:","selected":"B","jawaban":[{"pil":"A","jawaban":"Merah"},{"pil":"B","jawaban":"Kuning"},{"pil":"C","jawaban":"Hijau"},{"pil":"D","jawaban":"Biru"}]}];
};
To set default/checked radio button.
More details are available at http://play.ionic.io/app/6d698853ef09

Answer 1

just change your input line with the following code.
<input type="radio" ng-model="answer[quest.no]" value="{{choice.pil}}" name="{{quest.no}}">

Answer 2

ng-init="answer[quest.no]='A'"
You are using it wrong, value is actually different than A its A~Merah, so you should use it like
ng-init="answer[quest.no]='A~Merah'"
or best way is
<input type="radio" ng-model="answer[quest.no]" ng-value="'{{choice.pil}}'" name="{{quest.no}}">

Answer 3

In Ionic 2:
Project src directory: src => app => pages => home => home.ts
open home.ts
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { AlertController } from 'ionic-angular';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
num1:number;
num2:number;
sum:string;
// deafult value checked
rdValue:string = "mPlus";
constructor(public alertCtrl: AlertController) {
}
doSum():void {
if(typeof this.num1 !== 'number' || typeof this.num2 !== 'number') {
this.presentAlert();
} else {
var localNum1 = parseInt(this.num1);
var localNum2 = parseInt(this.num2);
//this.sum = parseInt(this.num1) + parseInt(this.num2);
var copyValue = this.rdValue;
switch(copyValue) {
case 'mPlus':
this.sum = localNum1 + localNum2;
break;
case 'mMinus':
this.sum = localNum1 - localNum2;
break;
case 'mMulti':
this.sum = localNum1 * localNum2;
break;
case 'mDivide':
this.sum = localNum2 / localNum1;
break;
}
}
}
presentAlert() {
let alert = this.alertCtrl.create({
title: 'Warnning',
subTitle: 'Only Enter Integer',
buttons: ['OK']
});
alert.present();
}
}
home.html
<ion-header>
<ion-navbar color="primary">
<ion-title>MCalculator</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding="0">
<ion-item>
<ion-label color="primary">Number 1:</ion-label>
<ion-input type="text" placeholder="Enter First Number" [(ngModel)]="num1"></ion-input>
</ion-item>
<ion-item>
<ion-label color="primary">Number 2:</ion-label>
<ion-input type="text" placeholder="Enter Second Number" [(ngModel)]="num2"></ion-input>
</ion-item>
<ion-list radio-group class="btn-margin m-font-size" [(ngModel)]="rdValue">
<ion-list-header>
<p>Arithmetic Options<p>
</ion-list-header>
<ion-item>
<ion-label>Addition</ion-label>
<ion-radio checked="true" value="mPlus"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Subtraction</ion-label>
<ion-radio value="mMinus"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Multiplication</ion-label>
<ion-radio value="mMulti">Multiplication</ion-radio>
</ion-item>
<ion-item>
<ion-label>Addition</ion-label>
<ion-radio value="mDivide"></ion-radio>
</ion-item>
</ion-list>
<ion-item>
<ion-label color="primary">Result:</ion-label>
<ion-input type="text" placeholder="Result" [(ngModel)]="sum"></ion-input>
</ion-item>
<button ion-button full large class="btn-margin" (click)="doSum()">Submit Operation</button>
</ion-content>
<!-- <ion-footer>
<ion-toolbar color="primary">
<ion-title></ion-title>
</ion-toolbar>
</ion-footer> -->