Material: An md-checkbox with md-indeterminate=false and ng-model=true does not render correctly

[zeddic]

Actual behavior:

• A md-checkbox with md-indetermine=false and ng-model=true renders as unchecked
• While the checkbox renders unchecked, for all other purposes it acts like it is checked.
  
  
  
  • ng-model remains true
  
  
  • aria-checked remains true
  
  
  • clicking it once causes it to enter the unchecked state
  
  
  • clicking it twice causes it to enter into the check state.
  
  
  • however, it is just missing the class md-checked
  
  

Expected behavior:

• A md-checkbox with md-indetermine=false and ng-model=true renders as checked

CodePen

• http://codepen.io/anon/pen/ONrgGZ

Angular Versions: *

• Angular Version: 1.48
• Angular Material Version: 1.1.0 rc2

[KelvinOm]

+1

[miteshpatel3]

We are using AngularJS v1.5.5 , Angular Material Design v1.0.8 and facing same issue. But here this mentioned fix will be applicable to AngularJS v1.5.5 & Angular Material Design v1.0.8 ?

[crisbeto]

I believe this fix was in 1.1.0.

[miteshpatel3]

@crisbeto So upgrading to Angular Material Design v1.1.0 will fix the issue! ??

[miteshpatel3]

@crisbeto : I have updated following code in checkbox.js as per 63e1c8e but still facing same issue.

`function compile (tElement, tAttrs) {
var container = tElement.children();

var mdIndeterminateStateEnabled = $mdUtil.parseAttributeBoolean(tAttrs.mdIndeterminate);

tAttrs.$set('tabindex', tAttrs.tabindex || '0');
tAttrs.$set('type', 'checkbox');
tAttrs.$set('role', tAttrs.type);

`

[crisbeto]

There's a unit test for this case in particular which still passes. @miteshpatel3 can you create a codepen that shows the issue?

[miteshpatel3]

http://codepen.io/miteshpatel3/pen/pEooBw which uses Angular JS 1.5.5 and Agnular material 1.1.0

[crisbeto]

Thanks, I'll revisit it today.

[crisbeto]

@miteshpatel3 your example is breaking, because you're supposed to use a data binding. E.g. if you change this:

<md-checkbox ng-model="ctrl.checked" md-indeterminate="ctrl.indeterminate"</md-checkbox>

To this, it works:

<md-checkbox ng-model="ctrl.checked" md-indeterminate="{{ ctrl.indeterminate }}"</md-checkbox>

It's listed in the docs that it's supposed to be an expression, as well.

[oOLucioleOo]

you have to use ng-checked instead of ng-model. As specified in the docs.

[avreddy1996]

@crisbeto md-indeterminate is an expression not a boolean or value so no need to use the expressions and it mentioned in the doc which u have shared so that is not the solution