fix(checkbox): support for ng-checked

Added support and demo for ng-checked usages.

Fixes #1550.

src/components/checkbox/checkbox.js

@@ -111,7 +111,9 @@ function MdCheckboxDirective(inputDirective, $mdInkRipple, $mdAria, $mdConstant,
 
  scope.$apply(function() {
  // Toggle the checkbox value...
- ngModelCtrl.$setViewValue( !ngModelCtrl.$viewValue, ev && ev.type);
+ var viewValue = attr.ngChecked ? attr.checked : !ngModelCtrl.$viewValue;
+
+ ngModelCtrl.$setViewValue( viewValue, ev && ev.type);
  ngModelCtrl.$render();
  });
  }

src/components/checkbox/demoBasicUsage/index.html

@@ -1,5 +1,6 @@
 
-<div ng-controller="AppCtrl">
+<div ng-controller="AppCtrl" layout-padding >
+ <p> Using ngModel: </p>
  <div>
  <md-checkbox ng-model="data.cb1" aria-label="Checkbox 1">
  Checkbox 1: {{ data.cb1 }}

src/components/checkbox/demoSyncing/index.html

@@ -0,0 +1,30 @@
+<div ng-controller="AppCtrl" layout-padding >
+ <p> Using ngChecked: </p>
+
+ <div layout="row" layout-padding>
+
+ <fieldset layout="column">
+ <legend>Using &lt;md-checkbox&gt;</legend>
+ <md-checkbox ng-repeat="item in items" ng-checked="exists(item, selected)" ng-click="toggle(item, selected)">
+ {{ item }} <span ng-if="exists(item, selected)">selected</span>
+ </md-checkbox>
+ </fieldset>
+
+ <fieldset layout="column" class="standard">
+ <legend>Using &lt;input type="checkbox"&gt;</legend>
+ <div ng-repeat="item in items" class="standard" >
+ <label>
+ <input type="checkbox" ng-checked="exists(item, selected)" ng-click="toggle(item, selected)"/>
+ {{ item }}
+ </label>
+ </div>
+ </fieldset>
+
+ </div>
+
+ <div layout="column">
+ <md-checkbox ng-checked="selected.length >= 2" disabled>Two or more items are selected</md-checkbox>
+ <span class="info">Selected: {{ selected }}</span>
+ </div>
+
+</div>

src/components/checkbox/demoSyncing/script.js

@@ -0,0 +1,18 @@
+
+angular.module('checkboxDemo1', ['ngMaterial'])
+
+.controller('AppCtrl', function($scope) {
+
+ $scope.items = [1,2,3,4,5];
+ $scope.selected = [];
+
+ $scope.toggle = function (item, list) {
+ var idx = list.indexOf(item);
+ if (idx > -1) list.splice(idx, 1);
+ else list.push(item);
+ };
+
+ $scope.exists = function (item, list) {
+ return list.indexOf(item) > -1;
+ };
+});

src/components/checkbox/demoSyncing/style.css

@@ -0,0 +1,26 @@
+.checkboxDemo1 div {
+ clear: both;
+}
+.checkboxDemo1 md-checkbox {
+ float: left;
+}
+
+legend {
+ color : #0000ba;
+}
+
+p {
+ padding-left : 10px;
+}
+
+.info {
+ padding-left:13px;
+}
+
+div.standard {
+ padding:10px; padding-left:15px;
+}
+
+fieldset.standard {
+ margin-left:10px;
+}