/.

Author: tinayuangao

src/demo-app/checkbox/checkbox-demo.html

@@ -45,3 +45,20 @@ <h1>md-checkbox: Basic Example</h1>
 
 <h1>Nested Checklist</h1>
 <md-checkbox-demo-nested-checklist></md-checkbox-demo-nested-checklist>
+
+<md-card>
+  <md-checkbox [(ngModel)]="checked" [indeterminate]="indeterminate">
+    Active
+  </md-checkbox>
+  <br>
+  <label>
+    <input type="checkbox" [(ngModel)]="checked" [(indeterminate)]="indeterminate">
+    Active
+  </label>
+  <br><br><br>
+  <button (click)="checked=!checked">Toggle Checked: {{checked}}</button>
+  &nbsp;
+  <button (click)="indeterminate=!indeterminate">Toggle Indeterminate: {{indeterminate}}</button><br>
+
+
+</md-card>

src/demo-app/checkbox/checkbox-demo.ts

@@ -63,6 +63,9 @@ export class MdCheckboxDemoNestedChecklist {
   styleUrls: ['checkbox-demo.css'],
 })
 export class CheckboxDemo {
+  checked: boolean = true;
+  indeterminate: boolean = true;
+
   isIndeterminate: boolean = false;
   isChecked: boolean = false;
   isDisabled: boolean = false;

src/lib/checkbox/checkbox.ts

@@ -160,7 +160,7 @@ export class MdCheckbox implements ControlValueAccessor {
   }
 
   /**
-   * Whether the checkbox is checked. Note that setting `checked` will immediately set
+   * Whether the checkbox is checked. Note that setting `checked` to true will immediately set
    * `indeterminate` to false.
    */
   @Input() get checked() {
@@ -169,7 +169,9 @@ export class MdCheckbox implements ControlValueAccessor {
 
   set checked(checked: boolean) {
     if (checked != this.checked) {
-      this._indeterminate = false;
+      if (checked) {
+        this.indeterminate = false;
+      }
       this._checked = checked;
       this._transitionCheckState(
           this._checked ? TransitionCheckState.Checked : TransitionCheckState.Unchecked);
@@ -179,7 +181,7 @@ export class MdCheckbox implements ControlValueAccessor {
   /**
    * Whether the checkbox is indeterminate. This is also known as "mixed" mode and can be used to
    * represent a checkbox with three states, e.g. a checkbox that represents a nested list of
-   * checkable items. Note that whenever `checked` is set, indeterminate is immediately set to
+   * checkable items. Note that whenever `checked` is set to true, indeterminate is immediately set to
    * false. This differs from the web platform in that indeterminate state on native
    * checkboxes is only remove when the user manually checks the checkbox (rather than setting the
    * `checked` property programmatically). However, we feel that this behavior is more accommodating