javascript - 具有 Angular Material 的三态 md-checkbox

Question

我正在使用 Angular material 1.0.5 和 md-checkbox 指令。 我想知道是否有人知道如何将其变成三态复选框。

三种状态(以及针对我的情况的相关变量值)是:

• 已检查(正确)
• 未选中(假)
• 不确定(空)

对于指定的 Angular Material 版本 (1.0.5)，当复选框被禁用时，它 将不确定状态显示为一个带有问号的复选框。

但是，当它未被禁用时，它默认返回到两个状态的复选框。

到目前为止，我失败的尝试是将指令包装在另一个指令中并试图接管对 md-checkbox 的控制。

有没有人对这种情况有任何指示？

谢谢。

Answer 1

如果您使用 Angular Material >1.0.8，您可以使用 md-indeterminate 属性并使用您自己的 ng-change 函数管理该值。

HTML

<md-checkbox ng-model="vm.checkModel" 
             md-indeterminate="vm.checkModel === null" 
             ng-change="vm.checkModelChange()">
    Checkbox
</md-checkbox>

Controller

var checkValues = [false, true, null];
var index = 0;
vm.checkModel = checkValues[index];

vm.checkModelChange = function() {
  vm.checkModel = checkValues[++index % checkValues.length];
}

• 检查这个 JSFIDDLE for angular material >1.0.8 . (最佳解决方案)

• 检查这个 JSFIDDLE for angular material 1.0.5 . (我使用 ng-class css 来模拟不确定状态)。