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 and radio

Browse Source
This commit is contained in:
Tim Lancina
2015-07-17 15:41:01 -05:00
parent 2ed18de699
commit cb5fa23a80
7 changed files with 157 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
ionic/components/checkbox/checkbox.ts
View File

@ -17,8 +17,9 @@ import {Icon} from '../icon/icon';
@IonicComponent({
selector: 'ion-checkbox',
host: {
'class': 'item',
'[attr.aria-checked]': 'checked'
'[class.item]': 'item',
'[attr.aria-checked]': 'input.checked',
'(^click)': 'onClick($event)'
},
defaultProperties: {
'iconOff': 'ion-ios-circle-outline',
@ -27,7 +28,7 @@ import {Icon} from '../icon/icon';
})
@IonicView({
template:
'<div class="item-media media-checkbox" (click)="onClick($event)">' +
'<div class="item-media media-checkbox">' +
'<icon [name]="iconOff" class="checkbox-off"></icon>' +
'<icon [name]="iconOn" class="checkbox-on"></icon>' +
'</div>' +
@ -36,42 +37,31 @@ import {Icon} from '../icon/icon';
'</div>'
})
export class Checkbox extends IonInputItem {
_checkbox: CheckboxInput;
constructor(
elementRef: ElementRef,
config: IonicConfig
) {
super(elementRef, config);
this.item = true;
}
onAllChangesDone() {
// Enforce that this directive actually contains a checkbox
if (this._checkbox == null) {
throw 'No <input type="checkbox"> found inside of <ion-checkbox>';
}
}
onClick(ev) {
// toggling with spacebar fires mouse event
if (ev.target.tagName === "INPUT") return;
registerInput(checkboxDir) {
if (this._checkbox != null) {
throw 'Only one <input type="checkbox"> is allowed per <ion-checkbox>'
}
this._checkbox = checkboxDir.elementRef.nativeElement;
this._checkboxDir = checkboxDir;
}
this.input.checked = !this.input.checked;
onClick(e) {
let val = !this._checkbox.checked;
this._checkbox.checked = val;
this.checked = val;
//TODO figure out a way to trigger change on the actual input to trigger
//TODO trigger change/mouse event on the actual input to trigger
// form updates
// this._checkbox.dispatchEvent(e);
//this._checkboxDir.control.valueAccessor.writeValue(val);
}
onChangeEvent(input) {
//TODO can we just assume this will always be true?
this.input.checked = this.input.elementRef.nativeElement.checked;
}
}

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

@ -1,7 +1,4 @@
import {Component, View} from 'angular2/angular2';
import {Query, QueryList, NgFor} from 'angular2/angular2';
// import {FormBuilder, Validators, NgFormControl, Control, NgControlName, NgControlGroup, ControlContainer} from 'angular2/forms';
import {App} from 'ionic/ionic';
import {
Control,
ControlGroup,
@ -14,8 +11,6 @@ import {
NgFormModel,
FormBuilder
} from 'angular2/forms';
import {App, Checkbox, Content, List} from 'ionic/ionic';
//import {IONIC_DIRECTIVES} from 'ionic/ionic'
@App({
templateUrl: 'main.html'