javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

more checkbox wip

Browse Source
This commit is contained in:
Tim Lancina
2015-06-23 16:17:43 -05:00
parent e5caeb9b8f
commit 34c71b2e7e
2 changed files with 22 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
ionic/components/checkbox/checkbox.js
View File

@ -1,4 +1,4 @@
import {ElementRef, Renderer} from 'angular2/angular2'; import {ElementRef, Renderer, EventEmitter, onChange} from 'angular2/angular2';
import {isPresent} from 'angular2/src/facade/lang'; import {isPresent} from 'angular2/src/facade/lang';
import {setProperty} from 'angular2/src/forms/directives/shared' import {setProperty} from 'angular2/src/forms/directives/shared'
@ -20,7 +20,6 @@ import {Icon} from '../icon/icon';
<icon [name]="iconOff" class="checkbox-off"></icon> <icon [name]="iconOff" class="checkbox-off"></icon>
<icon [name]="iconOn" class="checkbox-on"></icon> <icon [name]="iconOn" class="checkbox-on"></icon>
</div> </div>
<div class="item-content"> <div class="item-content">
<div class="item-label"> <div class="item-label">
<content></content> <content></content>
@ -38,8 +37,11 @@ export class Checkbox {
'iconOff': 'ion-ios-circle-outline', 'iconOff': 'ion-ios-circle-outline',
'iconOn': 'ion-ios-checkmark' 'iconOn': 'ion-ios-checkmark'
}, },
//events: ['change'],
host: { host: {
'(^click)': 'onClick($event)', '(^click)': 'onClick($event)',
//'(change)': 'onChange($event.checked)',
'(blur)': 'onTouched()',
'[checked]': 'checked', '[checked]': 'checked',
'[attr.aria-checked]': 'checked', '[attr.aria-checked]': 'checked',
'[attr.aria-disabled]': 'disabled', '[attr.aria-disabled]': 'disabled',
@ -53,7 +55,8 @@ export class Checkbox {
'[class.ng-valid]': 'ngClassValid', '[class.ng-valid]': 'ngClassValid',
'[class.ng-invalid]': 'ngClassInvalid' '[class.ng-invalid]': 'ngClassInvalid'
}, },
appInjector: [ NgControl ] appInjector: [ NgControl ],
//lifecycle: [onChange]
} }
} }
@ -66,6 +69,8 @@ export class Checkbox {
this.renderer = renderer; this.renderer = renderer;
this.elementRef = elementRef; this.elementRef = elementRef;
this.ngControl.valueAccessor = this; this.ngControl.valueAccessor = this;
//this.change = new EventEmitter("change");
} }
onInit() { onInit() {
@ -79,13 +84,14 @@ export class Checkbox {
writeValue(value) { writeValue(value) {
// Convert it to a boolean // Convert it to a boolean
this.checked = !!value; this.checked = !!value;
setProperty(this.renderer, this.elementRef, "checked", value);
} }
set checked(checked) { set checked(checked) {
this._checked = checked this._checked = checked;
this.ngControl.control.checked = checked; // doesn't trigger change/validation for control?
//this.controlDirective._control().updateValue(this._checked); setProperty(this.renderer, this.elementRef, "checked", checked);
//this.ngControl.control.checked = checked;
//this.change.next(checked);
} }
get checked() { get checked() {
return this._checked return this._checked

16
ionic/components/checkbox/test/basic/index.js
View File

@ -12,7 +12,8 @@ import {
NgControl, NgControl,
ControlValueAccessor, ControlValueAccessor,
NgControlName, NgControlName,
NgFormModel NgFormModel,
FormBuilder
} from 'angular2/forms'; } from 'angular2/forms';
import {Checkbox, Content, List} from 'ionic/ionic'; import {Checkbox, Content, List} from 'ionic/ionic';
//import {IONIC_DIRECTIVES} from 'ionic/ionic' //import {IONIC_DIRECTIVES} from 'ionic/ionic'
@ -59,18 +60,19 @@ class IonicApp {
// grapeCtrl: ['', Validators.required], // grapeCtrl: ['', Validators.required],
// cherryCtrl: ['', Validators.required] // cherryCtrl: ['', Validators.required]
// }; // };
// //
// this.fruitsForm = fb.group(this.controls); // this.fruitsForm = fb.group(this.controls);
this.fruitsForm = new ControlGroup({ this.fruitsForm = new ControlGroup({
"appleCtrl": new Control("APPLE", isChecked), "appleCtrl": new Control("APPLE", isChecked),
"bananaCtrl": new Control("BANANA", isChecked), "bananaCtrl": new Control("BANANA", isChecked),
"grapeCtrl": new Control("GRAPE", isChecked), "grapeCtrl": new Control("GRAPE", isChecked),
"cherryCtrl": new Control("CHERRY", isChecked) "cherryCtrl": new Control("CHERRY", isChecked)
}); });
// this.appleCtrl = new Control("APPLE", isChecked); this.appleCtrl = "appleCtrl";
// this.bananaCtrl = new Control("BANANA", isChecked); this.bananaCtrl = "bananaCtrl";
// this.grapeCtrl = new Control("GRAPE", isChecked); this.grapeCtrl = "grapeCtrl";
// this.cherryCtrl = new Control("CHERRY", isChecked); this.cherryCtrl = "cherryCtrl";
function isChecked(ctrl) { function isChecked(ctrl) {
if (ctrl.checked) { if (ctrl.checked) {
@ -81,7 +83,7 @@ class IonicApp {
} }
} }
} }
} }
doSubmit(event) { doSubmit(event) {
console.log('Submitting form', this.fruitsForm.value); console.log('Submitting form', this.fruitsForm.value);