mdCheckbox: wrong display state when using ngChecked

[ngraef]

CodePen example: http://codepen.io/anon/pen/zxWrGP?editors=101

In the example, ngChecked and ngClick are used to track a list of multiple selected items. The mdCheckboxes display correct state when the model is manipulated by the standard checkboxes. However, after interacting with the mdCheckboxes, their display state is reversed. Using the standard checkboxes again fixes the mdCheckbox state.

(Related: ngChecked initially implemented for #535)

[ngraef]

Related: check validity after the #1006 refactor

[djgadd]

Confirmed, there's a not operator on the checked var inside the apply:

checkbox.js:123

scope.$apply(function() {
      checked = !checked;
      ngModelCtrl.$setViewValue(checked, ev && ev.type);
      ngModelCtrl.$render();
});

Removing the ! has fixed it for me, don't know what the intention of it was and I unfortunately don't have the time to take a more in depth look, sorry! Hope this helps though.

Thanks guys.

[ngraef]

@ThomasBurleson It doesn't look like 942d0b9 fixed the demo in my initial post.

[ThomasBurleson]

@ngraef - switch ng-checked to ng-model="exists(item, selected)" and all works.

[ThomasBurleson]

I have re-opened to investigate issues with ng-checked.

[ngraef]

@ThomasBurleson Interesting, but that gives ngModel:nonassign errors (as expected). Thanks for reopening.

[ngraef]

So the underlying issue is that the ngChecked attribute is watched by mdCheckbox and triggers a view value update, but then the mdCheckbox click listener also fires and toggles the view value. This explains why the display state is reversed and why the correct state is produced when manipulating the value outside of any mdCheckbox interaction (via the standard checkboxes).

A few possible fixes with varying degrees of cleanliness:

1. Add a check to the click listener that prevents toggling of the value if ngChecked is being used (line 111).

   function listener(ev) {
      if (element[0].hasAttribute('disabled')) return;
      if (attr.ngChecked) return;
      ...
   }

2. Set the correct value in the click listener (line 114).

   scope.$apply(function() {
      var newVal = attr.ngChecked ? attr.checked : !ngModelCtrl.$viewValue;
      ngModelCtrl.$setViewValue(newVal, ev && ev.type);
      ngModelCtrl.$render();
   });

3. Delay execution of the scope.$watch handler for ngChecked to make it set the correct value after the click listener toggles the value (line 84).

   if (attr.ngChecked) {
      scope.$watch(
          scope.$eval.bind(scope, attr.ngChecked),
          function (newVal) {
              $timeout(function () {
                  ngModelCtrl.$setViewValue(newVal);
              });
          }
      );
   }

[ThomasBurleson]

@ngraef - the above is very helpful. Thank you.