Question

如何在IONIC中设置已选中/默认单选按钮值？

我的代码如下：

<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>

纳克-INIT =＆＃34;回答[quest.no] =＆＃39; A＆＃39;＆＃34;

我需要更换＆＃39; A＆＃39;选择＆＃34;选择＆＃34;数据库模拟的值如下所示

$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"}]}];
  };

设置默认/选中单选按钮。

更多详细信息，请访问http://play.ionic.io/app/6d698853ef09

Answer 1

只需使用以下代码更改输入行。

 <input type="radio"  ng-model="answer[quest.no]" value="{{choice.pil}}" name="{{quest.no}}">

Answer 2

ng-init="answer[quest.no]='A'"

你使用它错了，价值实际上不同于它的A~Merah，所以你应该像使用它一样

ng-init="answer[quest.no]='A~Merah'"

或最好的方式是

<input type="radio"  ng-model="answer[quest.no]" ng-value="'{{choice.pil}}'" name="{{quest.no}}">

Answer 3

在Ionic 2中：

Project src目录：src =＆gt; app =＆gt; pages =＆gt; home =＆gt; home.ts

打开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> -->

如何检查IONIC中的单选按钮？

3 个答案: