Tri-state md-checkbox with angular materials

Question

I'm working with Angular material 1.0.5 and the md-checkbox directive. I was wondering if anyone knows how to make this into a tri-state checkbox.

The three states (and the associated variable values for my situation) are:

• Checked (true)
• Unchecked (false)
• Indeterminate (null)

For the version of Angular Material specified (1.0.5), when the checkbox is disabled, it shows the indeterminate state as a checkbox with a question mark in it.

However, when it is not disabled, it defaults back to a two state checkbox.

So far my failed attempts have been to wrapping the directive in another directive and trying to take over control of the md-checkbox.

Does anyone have any pointers in this situation?

Thanks.

Answer 1

If you use angular material >1.0.8, you are able to use the md-indeterminate attribute and manage the value with your own ng-change function.

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];
}

• Check this JSFIDDLE for angular material >1.0.8. (Best solution)

• Check this JSFIDDLE for angular material 1.0.5. (I've used ng-class css to simulate the indeterminate state).