如何解决角:取消选中不确定复选框不起作用
我有一个非常简单的要求。假设复选框具有三种状态:不确定,选中和未选中。 我想要什么:
- 单击不确定复选框时,应取消选中
- 点击选中的复选框时,应取消选中
- 当单击未选中的复选框时,应该选中
但是在angular2中,我无法解决第一个要求。无论我做什么,单击不确定的复选框都会被选中(不期望)。
请检查stackbliz
export class AppComponent {
name = 'Angular';
milestone = { status: "crossed" };
checkMilestone(milestone) {
switch (milestone.status) {
case "crossed": {
milestone.status = "unchecked";
break;
}
case "unchecked": {
milestone.status = "checked";
break;
}
case "checked": {
milestone.status = "unchecked";
break;
}
}
}
}
HTML
<input type="checkbox" [indeterminate]="milestone?.status === 'crossed'" [checked]="milestone?.status === 'checked'" (change)="checkMilestone(milestone)"> Status: {{ milestone?.status }}
我要实现父子复选框,并选择与this fiddle类似但有角度的所有功能。
解决方法
是的,您可以实现,只需将代码更新为以下内容即可:
HTML:
<input #input type="checkbox" [indeterminate]="milestone?.status === 'crossed'"
(click)="checkMilestone($event)"
> Status: {{ milestone?.status }}
TypeScript:
checkMilestone(e) {
switch (this.milestone.status) {
case "crossed": {
e.target.checked = false;
this.milestone.status = "unchecked";
break;
}
case "unchecked": {
this.milestone.status = "checked";
break;
}
case "checked": {
this.milestone.status = "unchecked";
break;
}
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。