具有 angular 材料的三态 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>

控制器

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来模拟不确定状态).

具有 angular 材料的三态 md-checkbox

Tri-state md-checkbox with angular materials

javascript

frontend

angularjs

angularjs-directive

angular-material