[英]Check only one checkbox (radio buttons behavior) within an *ngFor loop
我有一个在Angular2
开发的Quizz模块,所以只提出了一些带有建议答案的问题,您只需要检查一个答案,我知道单选按钮可以处理这种情况,但是我希望它成为具有单选按钮行为的复选框,问题是我做了一部分工作,但是由于它在*ngFor
循环中比较复杂,所以一旦我检查了B问题,答案就会被取消,依此类推。 这是我的HTML:
<div *ngFor="#qt of listQuestion"><h3 class="uk-accordion-title" >{{qt.wordingQ}}</h3>
<div class="uk-accordion-content">
<input type="checkbox" class="cb" id="0" [(ngModel)]="qt.chp[0]" onchange="cbChange(this)" />
<label for="0" class="inline-label" > <b>{{qt.lpo[0]}}</b></label><br><br>
<input type="checkbox" class="cb" id="1" [(ngModel)]="qt.chp[1]" onchange="cbChange(this)" />
<label for="1" class="inline-label"><b>{{qt.lpo[1]}}</b></label><br><br>
<input type="checkbox" class="cb" id="2" [(ngModel)]="qt.chp[2]" onchange="cbChange(this)"/>
<label for="2" class="inline-label"> <b>{{qt.lpo[2]}}</b></label><br><br>
<input type="checkbox" class="cb" id="3" [(ngModel)]="qt.chp[3]" onchange="cbChange(this)"/>
<label for="3" class="inline-label"><b>{{qt.lpo[3]}}</b></label>
</div></div>
这是脚本进行独奏检查的方式:
<script>
function cbChange(obj) {
var cbs = document.getElementsByClassName("cb");
for (var i = 0; i < cbs.length; i++) {
cbs[i].checked = false;
}
obj.checked = true;
}
</script>
如您所见,这是一个*ngFor
循环,用于加载问题列表; 每个问题都有一个命题列表( lpo[i]
), [(ngModel)]="qt.chp[i]"
用于获取每个命题(已检查的命题)的状态,我想我必须参考每个onchange
函数每个唯一的ngModel
(因为它在索引中),但我不知道如何。 有什么帮助吗? (这里是真实的情况图片)
在您的情况下,由于每个问题只能选择一个答案,因此建议您不要在答案级别使用布尔字段表示选择。 而是应将所选答案存储在问题级别。 像这样:
class Question {
wording: string;
answers: string[];
selectedAnswer: string;
selectAnswer(ans: string) {
this.selectedAnswer = ans;
}
}
将来,您可以轻松地更改selectedAnswer属性和selectAnswer函数实现,以根据需要满足多个选择。 然后,需要对问题模板进行一些修改以适应更改:
<div *ngFor="let question of questions">
<p>{{question.wording}}</p>
<div *ngFor="let answer of question.answers; let aIndex = index">
<input type="checkbox" class="cb" id="{{aIndex}}" [ngModel]="answer === question.selectedAnswer" (ngModelChange)="question.selectAnswer(answer)" />
<label for="{{aIndex}}" class="inline-label" > <b>{{answer}}</b></label><br><br>
</div>
</div>
这是可运行的监听器: http ://plnkr.co/edit/xMTtFp31rU2ZqCtV8JO1?p=preview
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.