时间戳

首页 > 解决方案 > 角度为 2 的三态复选框

javascript - 角度为 2 的三态复选框

问题描述

我想做一个具有三种状态的输入框：选中，未选中和交叉（又名失败）目前，我能够进行选中/取消选中并相应地更改计算

 <input type="checkbox" [ngStyle]="{content: expression}" *ngIf="milestone?.description" [checked]="milestone?.status == 'checked'" (change)="checkMilestone(milestone,initiative, $event, '')">

但是，我无法添加crossed( X) 复选框。有谁知道应该怎么做？我应该有这样的状态：

states = [
    { id: 0, status: 'checked'},
    { id: 1, status: 'unchecked'},
    { id: 2, status: 'crossed'}
];

并添加样式并相应地更改它们？我不确定如何添加三种样式而不是两种。

标签： javascriptcssangulartypescriptcheckbox

解决方案

可以使用属性绑定设置复选框的不确定状态。这是您的标记的简化版本，显示了状态绑定：indeterminate

<input type="checkbox" [indeterminate]="milestone?.status === 'crossed'" 
  [ngModel]="milestone?.status === 'checked'" (ngModelChange)="checkMilestone(milestone)">

该checkMilestone方法可能是这样的：

checkMilestone(milestone) {
  switch (milestone.status) {
    case "checked": {
      milestone.status = "unchecked";
      break;
    }
    case "unchecked": {
      milestone.status = "crossed";
      break;
    }
    case "crossed": {
      milestone.status = "checked";
      break;
    }
  }
}

请参阅此 stackblitz以获取演示。

推荐阅读