javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

checkbox wip

Browse Source
This commit is contained in:
Tim Lancina
2015-07-27 15:22:40 -05:00
parent 436ac4af8a
commit 0770abfc44
8 changed files with 130 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
ionic/components/checkbox/test/basic/index.ts
View File

@ -17,37 +17,15 @@ import {
})
class IonicApp {
constructor() {
// var fb = new FormBuilder();
// this.controls = {
// appleCtrl : ['', Validators.required],
// bananaCtrl: ['', Validators.required],
// grapeCtrl: ['', Validators.required],
// cherryCtrl: ['', Validators.required]
// };
//
// this.fruitsForm = fb.group(this.controls);
this.fruitsForm = new ControlGroup({
"appleCtrl": new Control("", isChecked),
"bananaCtrl": new Control("", isChecked),
// "bananaCtrl": new Control("BANANA", isChecked),
// "grapeCtrl": new Control("GRAPE", isChecked),
// "cherryCtrl": new Control("CHERRY", isChecked)
"appleCtrl": new Control({"checked": false, "value": "apple"}),
"bananaCtrl": new Control(true),
"cherryCtrl": new Control({"checked": false, "value": 12}),
"grapeCtrl": new Control("grape")
});
function isChecked(ctrl) {
if (ctrl.checked) {
return null;
} else {
return {
'notChecked': true
}
}
}
}
doSubmit(event) {
doSubmit(ev) {
console.log('Submitting form', this.fruitsForm.value);
event.preventDefault();
}

43
ionic/components/checkbox/test/basic/main.html
View File

@ -1,30 +1,29 @@
<ion-content>
<form (^submit)="doSubmit($event)" [ng-form-model]="fruitsForm">
<ion-list>
<ion-checkbox icon-on="ion-android-checkmark-circle"><label>Apple</label><input #apple type="checkbox" ng-control="appleCtrl"></ion-checkbox>
<ion-checkbox><label>Banana</label><input #banana type="checkbox" ng-control="bananaCtrl"></ion-checkbox>
<ion-checkbox icon-on="ion-android-checkmark-circle" ng-control="appleCtrl"><label>Apple</label><input checked="hello" type="checkbox"></ion-checkbox>
<ion-checkbox ng-control="bananaCtrl"><label>Banana</label><input value="test" type="checkbox"></ion-checkbox>
<ion-checkbox ng-control="cherryCtrl"><label>Cherry</label><input type="checkbox"></ion-checkbox>
<ion-checkbox ng-control="grapeCtrl"><label>Grape</label><input value="test" checked="blah" type="checkbox"></ion-checkbox>
<ion-list>
<!-- <ion-checkbox ng-control="appleCtrl">
Apples
</ion-checkbox>
<ion-checkbox ng-control="bananaCtrl">
Bananas
</ion-checkbox>
<ion-checkbox ng-control="grapeCtrl">
Grapes
</ion-checkbox>
<ion-checkbox ng-control="cherryCtrl">
Cherries
</ion-checkbox> -->
<button type="submit">Submit</button>
<br>
</form>
appleCtrl.dirty: {{fruitsForm.controls.appleCtrl.dirty}}<br>
appleCtrl.value: {{fruitsForm.controls.appleCtrl.value}}<br>
apple.value: {{apple.value}}<br>
apple.checked: {{apple.checked}} <br>
appleCtrl.value: {{fruitsForm.controls.appleCtrl.value.value}}<br>
appleCtrl.checked: {{fruitsForm.controls.appleCtrl.value.checked}}<br>
bananaCtrl.dirty: {{fruitsForm.controls.bananaCtrl.dirty}}<br>
bananaCtrl.value: {{fruitsForm.controls.bananaCtrl.value}}<br>
banana.value: {{banana.value}}<br>
banana.checked: {{banana.checked}}
bananaCtrl.value: {{fruitsForm.controls.bananaCtrl.value.value}}<br>
bananaCtrl.checked: {{fruitsForm.controls.bananaCtrl.value.checked}}<br>
cherry.dirty: {{fruitsForm.controls.cherryCtrl.dirty}}<br>
cherry.value: {{fruitsForm.controls.cherryCtrl.value.value}}<br>
cherry.checked: {{fruitsForm.controls.cherryCtrl.value.checked}}<br>
grape.dirty: {{fruitsForm.controls.grapeCtrl.dirty}}<br>
grape.value: {{fruitsForm.controls.grapeCtrl.value.value}}<br>
grape.checked: {{fruitsForm.controls.grapeCtrl.value.checked}}<br>
<!-- <input type="checkbox" value="test" ng-control="appleCtrl">
<input type="checkbox" value="hello" ng-control="bananaCtrl">
<button type="submit">Submit</button>
</form> -->
</ion-content>