Ionic2、Angular2:[(ngModel)] 用于离子复选框或 html 复选框?
Ionic2,Angular2: [(ngModel)] for ion-checkbox or html checkbox?
以下情况中的 [(ngModel)] 应该是什么,以便我可以在幻灯片中保留复选框的状态?我需要在 select 选中复选框时从一张幻灯片滑动到另一张幻灯片,但是当我单击上一张时,需要保留状态。
这是我的单选按钮。我只是将单选按钮代码更改为复选框,但它不是 working.So 我删除了 [value] 属性 现在如果我 select 一个复选框,所有这些都被选中。
<ion-content padding>
<ion-slides>
<ion-slide *ngFor="let question of questions; let i = index">
<h1>{{ question.text }}</h1>
<span *ngIf="question.type=='singlecorrect'>
<ion-list radio-group [(ngModel)]="question.answer">
<ion-item no-lines no-padding *ngFor="let choice of question.choices">
<ion-label>{{ choice.choiceText }}</ion-label>
<ion-radio [value]="choice"></ion-radio>
</ion-item>
</ion-list>
</span>
<span *ngIf="question.type=='singlecorrect'>
<ion-list checkbox-group [(ngModel)]="question.answer">
<ion-item no-lines no-padding *ngFor="let choice of question.choices">
<ion-label>{{ choice.choiceText }}</ion-label>
<ion-checkbox></checkbox> // ERROR : no value accessor found.
</ion-item>
</ion-list>
</span>
<ion-row margin-top>
<ion-col>
<button (click)="showPrevious()" ion-button text-only [disabled]="i === 0" >Previous</button>
</ion-col>
<ion-col>
<button [disabled]="!question.answer" *ngIf="i < questions.length - 1" (click)="showNext()" ion-button text-only >Next</button>
<button [disabled]="!question.answer" *ngIf="i === questions.length - 1" (click)="showNext()" ion-button text-only >Submit</button>
</ion-col>
</ion-row>
</ion-slide>
</ion-slides>
</ion-content>
我将 selected 选择存储在一个名为 "answer" 的数组中。请参阅:
有人能帮我吗?提前致谢。
我不确定是所有问题都应该使用复选框,还是只使用其中的一部分。我修改了之前的 plunker,将一些问题设置为 多项选择题 ,并将其余问题设置为 单选题 。请看一下 new version of the plunker
这是最终结果:
在演示中,现在每个问题都有以下属性:
{
text: 'Question 1',
multiple: false,
choices: [...],
answer: null
}
如果问题允许多个答案,则 answer
属性 会使用一个数组进行初始化,该问题的每个可用选项都有一个项目。
// Initialize the answers
this.questions.forEach(question => {
if(question.multiple) {
// Initialize an array with as many elements as the number of choices
question.answer = new Array(question.choices.length);
}
});
然后在视图中我们相应地呈现单选项或复选框项:
<ion-slides>
<ion-slide *ngFor="let question of questions; let i = index">
<h1>{{ question.text }}</h1>
<!-- Single choice: radio items -->
<div *ngIf="!question.multiple">
<ion-list radio-group [(ngModel)]="question.answer">
<ion-item no-lines no-padding *ngFor="let choice of question.choices">
<ion-label>{{ choice.choiceText }}</ion-label>
<ion-radio [value]="choice"></ion-radio>
</ion-item>
</ion-list>
</div>
<!-- Multiple choice: checkbox items -->
<div *ngIf="question.multiple">
<ion-item no-lines no-padding *ngFor="let choice of question.choices; let i = index">
<ion-label>{{ choice.choiceText }}</ion-label>
<ion-checkbox [(ngModel)]="question.answer[i]"></ion-checkbox>
</ion-item>
</div>
<span style="font-size: 1.2rem;">Selected answer: {{ question.answer | json }}</span>
<ion-row margin-top>
<ion-col>
<button (click)="showPrevious()" ion-button text-only [disabled]="i === 0" >Previous</button>
</ion-col>
<ion-col>
<button [disabled]="!question.answer" *ngIf="i < questions.length - 1" (click)="showNext()" ion-button text-only >Next</button>
<button [disabled]="!question.answer" *ngIf="i === questions.length - 1" (click)="showNext()" ion-button text-only >Submit</button>
</ion-col>
</ion-row>
</ion-slide>
</ion-slides>
以下情况中的 [(ngModel)] 应该是什么,以便我可以在幻灯片中保留复选框的状态?我需要在 select 选中复选框时从一张幻灯片滑动到另一张幻灯片,但是当我单击上一张时,需要保留状态。
这是我的单选按钮。我只是将单选按钮代码更改为复选框,但它不是 working.So 我删除了 [value] 属性 现在如果我 select 一个复选框,所有这些都被选中。
<ion-content padding>
<ion-slides>
<ion-slide *ngFor="let question of questions; let i = index">
<h1>{{ question.text }}</h1>
<span *ngIf="question.type=='singlecorrect'>
<ion-list radio-group [(ngModel)]="question.answer">
<ion-item no-lines no-padding *ngFor="let choice of question.choices">
<ion-label>{{ choice.choiceText }}</ion-label>
<ion-radio [value]="choice"></ion-radio>
</ion-item>
</ion-list>
</span>
<span *ngIf="question.type=='singlecorrect'>
<ion-list checkbox-group [(ngModel)]="question.answer">
<ion-item no-lines no-padding *ngFor="let choice of question.choices">
<ion-label>{{ choice.choiceText }}</ion-label>
<ion-checkbox></checkbox> // ERROR : no value accessor found.
</ion-item>
</ion-list>
</span>
<ion-row margin-top>
<ion-col>
<button (click)="showPrevious()" ion-button text-only [disabled]="i === 0" >Previous</button>
</ion-col>
<ion-col>
<button [disabled]="!question.answer" *ngIf="i < questions.length - 1" (click)="showNext()" ion-button text-only >Next</button>
<button [disabled]="!question.answer" *ngIf="i === questions.length - 1" (click)="showNext()" ion-button text-only >Submit</button>
</ion-col>
</ion-row>
</ion-slide>
</ion-slides>
</ion-content>
我将 selected 选择存储在一个名为 "answer" 的数组中。请参阅:
我不确定是所有问题都应该使用复选框,还是只使用其中的一部分。我修改了之前的 plunker,将一些问题设置为 多项选择题 ,并将其余问题设置为 单选题 。请看一下 new version of the plunker
这是最终结果:
在演示中,现在每个问题都有以下属性:
{
text: 'Question 1',
multiple: false,
choices: [...],
answer: null
}
如果问题允许多个答案,则 answer
属性 会使用一个数组进行初始化,该问题的每个可用选项都有一个项目。
// Initialize the answers
this.questions.forEach(question => {
if(question.multiple) {
// Initialize an array with as many elements as the number of choices
question.answer = new Array(question.choices.length);
}
});
然后在视图中我们相应地呈现单选项或复选框项:
<ion-slides>
<ion-slide *ngFor="let question of questions; let i = index">
<h1>{{ question.text }}</h1>
<!-- Single choice: radio items -->
<div *ngIf="!question.multiple">
<ion-list radio-group [(ngModel)]="question.answer">
<ion-item no-lines no-padding *ngFor="let choice of question.choices">
<ion-label>{{ choice.choiceText }}</ion-label>
<ion-radio [value]="choice"></ion-radio>
</ion-item>
</ion-list>
</div>
<!-- Multiple choice: checkbox items -->
<div *ngIf="question.multiple">
<ion-item no-lines no-padding *ngFor="let choice of question.choices; let i = index">
<ion-label>{{ choice.choiceText }}</ion-label>
<ion-checkbox [(ngModel)]="question.answer[i]"></ion-checkbox>
</ion-item>
</div>
<span style="font-size: 1.2rem;">Selected answer: {{ question.answer | json }}</span>
<ion-row margin-top>
<ion-col>
<button (click)="showPrevious()" ion-button text-only [disabled]="i === 0" >Previous</button>
</ion-col>
<ion-col>
<button [disabled]="!question.answer" *ngIf="i < questions.length - 1" (click)="showNext()" ion-button text-only >Next</button>
<button [disabled]="!question.answer" *ngIf="i === questions.length - 1" (click)="showNext()" ion-button text-only >Submit</button>
</ion-col>
</ion-row>
</ion-slide>
</ion-slides>