checkbox updates

ionic/components/show-hide-when/test/basic/e2e.ts

@@ -0,0 +1,4 @@
+
+it('should toggle checkbox state with label click', function() {
+  element(by.css('#appleLabel')).click();
+});

ionic/components/show-hide-when/test/basic/index.ts

@@ -0,0 +1,44 @@
+import {App} from 'ionic/ionic';
+import {
+  Control,
+  ControlGroup,
+  NgForm,
+  formDirectives,
+  Validators,
+  NgControl,
+  ControlValueAccessor,
+  NgControlName,
+  NgFormModel,
+  FormBuilder
+} from 'angular2/forms';
+
+@App({
+  templateUrl: 'main.html'
+})
+class IonicApp {
+  constructor() {
+    this.fruitsForm = new ControlGroup({
+      "appleCtrl": new Control(),
+      "bananaCtrl": new Control(true),
+      "cherryCtrl": new Control(false),
+      "grapeCtrl": new Control(true)
+    });
+
+    this.grapeDisabled = true;
+    this.grapeChecked = true;
+  }
+
+  toggleGrapeChecked() {
+    this.grapeChecked = !this.grapeChecked;
+  }
+
+  toggleGrapeDisabled() {
+    this.grapeDisabled = !this.grapeDisabled;
+  }
+
+  doSubmit(ev) {
+    console.log('Submitting form', this.fruitsForm.value);
+    this.formResults = JSON.stringify(this.fruitsForm.value);
+    ev.preventDefault();
+  }
+}

ionic/components/show-hide-when/test/basic/main.html

@@ -0,0 +1,59 @@
+
+<ion-toolbar><ion-title>Show/Hide When</ion-title></ion-toolbar>
+
+
+<ion-content class="padding">
+
+  <p show-when="ios" style="background:blue; color:white">
+    show-when="ios"
+  </p>
+
+  <p show-when="android" style="background:green; color:white">
+    show-when="android"
+  </p>
+
+  <p show-when="android,ios" style="background:yellow;">
+    show-when="android,ios"
+  </p>
+
+  <p show-when="core" style="background:#ddd;">
+    show-when="core"
+  </p>
+
+  <p show-when="mobile" style="background:orange;">
+    show-when="mobile"
+  </p>
+
+  <p show-when="phablet" style="background:red;">
+    show-when="phablet"
+  </p>
+
+  <p show-when="tablet" style="background:black;color:white">
+    show-when="tablet"
+  </p>
+
+  <p show-when="iphone" style="background:purple; color:white;">
+    show-when="iphone"
+  </p>
+
+  <p show-when="landscape" style="background:pink;">
+    show-when="landscape"
+  </p>
+
+  <p show-when="portrait" style="background:maroon; color:white;">
+    show-when="portrait"
+  </p>
+
+  <p hide-when="ios" style="background:blue; color:white">
+    hide-when="ios"
+  </p>
+
+  <p hide-when="android" style="background:green; color:white">
+    hide-when="android"
+  </p>
+
+  <p hide-when="android,ios" style="background:yellow;">
+    hide-when="android,ios"
+  </p>
+
+</ion-content>