[英]Angular, bind input type Checkbox, checked by default
I am working on Angular 5 application with checkbox.我正在使用复选框处理 Angular 5 应用程序。 I have data coming from database, followed by mapped to javaScript object.
我有来自数据库的数据,然后映射到 javaScript 对象。 I am trying to configure 'Selected' value but unable to do so.
我正在尝试配置“选定”值,但无法这样做。 In my result, I got all boxes checked which should be.
在我的结果中,我检查了所有应该选中的框。
in following code, option: [] --> 'optionSelected' defined if is selected value by true or false,在以下代码中,选项:[] --> 'optionSelected' 定义了是否选择了 true 或 false 值,
produced schema as following;产生的模式如下;
<div *ngSwitchCase="'checkbox'"> <small>checkbox</small>
<div *ngFor="let opt of question.options" >
<label class="container-vertical"> {{opt.value}}
<input type="checkbox" [formControlName]="question.key" [name]="opt.name" [value]="opt.key" [checked]="opt.optionSelected" />
<span class="checkmark2"></span>
</label>
</div>
</div>
also tried with ngModel as in my component, property 'value' holds id of selected key but still final result checked all boxes也像在我的组件中一样尝试使用 ngModel,属性“值”包含所选键的 ID,但最终结果仍选中所有框
<input type="checkbox" [formControlName]="question.key" [name]="opt.name" [value]="opt.key" [(ngModel)]="question.value" />
else if(questionElementType=="checkbox")
{
let _checkBox = new CheckBoxQuestion ({
consultationId: questionsList[key].consultationId,
questionId: questionsList[key].questionId,
questionElementType: questionsList[key].questionElementType[0].title,
questionType: questionsList[key].questionType,
title:questionsList[key].title,
displayId: questionsList[key].displayId,
key: questionsList[key].questionId,
value: questionsList[key].answer.length<=0? null : questionsList[key].answer[0].answerValue.toLowerCase(),
label: questionsList[key].title,
order: 7,
options: questionsList[key].answerOptions.map(function(item){
return {"name": item.ReferenceKey, "key": item.preDefineAnswerOptionId, "value": item.text, "optionSelected": item.preDefineAnswerOptionId==questionsList[key].answer[0].answerValue? "true": "false"}
}),
});
this.mappedQuestions.push(_checkBox);
}
If you want the checkbox to be unchecked, its [value]
binding must be falsy.如果您希望取消选中该复选框,则其
[value]
绑定必须为假。
Both "true"
and "false"
are non empty strings, which means that they evaluate to true
. "true"
和"false"
都是非空字符串,这意味着它们的计算结果为true
。
Convert "false"
to false
and it will work as expected.将
"false"
转换为false
,它将按预期工作。
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<input type="checkbox" [(ngModel)]="checkbox1" /> "true"
<input type="checkbox" [(ngModel)]="checkbox2" /> "false"
<input type="checkbox" [(ngModel)]="checkbox3" /> true
<input type="checkbox" [(ngModel)]="checkbox4" /> false
`,
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
checkbox1 = 'true';
checkbox2 = 'false';
checkbox3 = true;
checkbox4 = false;
}
You can use it你可以使用它
<input type="checkbox" [(ngModel)]="active" [checked]="true"
(change)="isAactiveChange($event)" >
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.