mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 12:29:55 +08:00
more checkbox wip
This commit is contained in:
@ -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 {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]="iconOn" class="checkbox-on"></icon>
|
||||
</div>
|
||||
|
||||
<div class="item-content">
|
||||
<div class="item-label">
|
||||
<content></content>
|
||||
@ -38,8 +37,11 @@ export class Checkbox {
|
||||
'iconOff': 'ion-ios-circle-outline',
|
||||
'iconOn': 'ion-ios-checkmark'
|
||||
},
|
||||
//events: ['change'],
|
||||
host: {
|
||||
'(^click)': 'onClick($event)',
|
||||
//'(change)': 'onChange($event.checked)',
|
||||
'(blur)': 'onTouched()',
|
||||
'[checked]': 'checked',
|
||||
'[attr.aria-checked]': 'checked',
|
||||
'[attr.aria-disabled]': 'disabled',
|
||||
@ -53,7 +55,8 @@ export class Checkbox {
|
||||
'[class.ng-valid]': 'ngClassValid',
|
||||
'[class.ng-invalid]': 'ngClassInvalid'
|
||||
},
|
||||
appInjector: [ NgControl ]
|
||||
appInjector: [ NgControl ],
|
||||
//lifecycle: [onChange]
|
||||
}
|
||||
}
|
||||
|
||||
@ -66,6 +69,8 @@ export class Checkbox {
|
||||
this.renderer = renderer;
|
||||
this.elementRef = elementRef;
|
||||
this.ngControl.valueAccessor = this;
|
||||
|
||||
//this.change = new EventEmitter("change");
|
||||
}
|
||||
|
||||
onInit() {
|
||||
@ -79,13 +84,14 @@ export class Checkbox {
|
||||
writeValue(value) {
|
||||
// Convert it to a boolean
|
||||
this.checked = !!value;
|
||||
setProperty(this.renderer, this.elementRef, "checked", value);
|
||||
}
|
||||
|
||||
set checked(checked) {
|
||||
this._checked = checked
|
||||
this.ngControl.control.checked = checked;
|
||||
//this.controlDirective._control().updateValue(this._checked);
|
||||
this._checked = checked;
|
||||
// doesn't trigger change/validation for control?
|
||||
setProperty(this.renderer, this.elementRef, "checked", checked);
|
||||
//this.ngControl.control.checked = checked;
|
||||
//this.change.next(checked);
|
||||
}
|
||||
get checked() {
|
||||
return this._checked
|
||||
|
@ -12,7 +12,8 @@ import {
|
||||
NgControl,
|
||||
ControlValueAccessor,
|
||||
NgControlName,
|
||||
NgFormModel
|
||||
NgFormModel,
|
||||
FormBuilder
|
||||
} from 'angular2/forms';
|
||||
import {Checkbox, Content, List} from 'ionic/ionic';
|
||||
//import {IONIC_DIRECTIVES} from 'ionic/ionic'
|
||||
@ -59,18 +60,19 @@ class IonicApp {
|
||||
// grapeCtrl: ['', Validators.required],
|
||||
// cherryCtrl: ['', Validators.required]
|
||||
// };
|
||||
//
|
||||
//
|
||||
// this.fruitsForm = fb.group(this.controls);
|
||||
|
||||
this.fruitsForm = new ControlGroup({
|
||||
"appleCtrl": new Control("APPLE", isChecked),
|
||||
"bananaCtrl": new Control("BANANA", isChecked),
|
||||
"grapeCtrl": new Control("GRAPE", isChecked),
|
||||
"cherryCtrl": new Control("CHERRY", isChecked)
|
||||
});
|
||||
// this.appleCtrl = new Control("APPLE", isChecked);
|
||||
// this.bananaCtrl = new Control("BANANA", isChecked);
|
||||
// this.grapeCtrl = new Control("GRAPE", isChecked);
|
||||
// this.cherryCtrl = new Control("CHERRY", isChecked);
|
||||
this.appleCtrl = "appleCtrl";
|
||||
this.bananaCtrl = "bananaCtrl";
|
||||
this.grapeCtrl = "grapeCtrl";
|
||||
this.cherryCtrl = "cherryCtrl";
|
||||
|
||||
function isChecked(ctrl) {
|
||||
if (ctrl.checked) {
|
||||
@ -81,7 +83,7 @@ class IonicApp {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
doSubmit(event) {
|
||||
console.log('Submitting form', this.fruitsForm.value);
|
||||
|
Reference in New Issue
Block a user