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

fix(checkbox): use renderer for checked

Browse Source
This commit is contained in:
Adam Bradley
2016-01-06 14:37:56 -06:00
parent 9f9e28c36c
commit 15bbe75649
1 changed files with 23 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import {Component, Directive, Optional, ElementRef} from 'angular2/core'; import {Component, Directive, Optional, ElementRef, Renderer, HostListener} from 'angular2/core';
import {NgControl} from 'angular2/common'; import {NgControl} from 'angular2/common';
import {Ion} from '../ion'; import {Ion} from '../ion';
@ -33,13 +33,9 @@ import {Form} from '../../util/form';
host: { host: {
'role': 'checkbox', 'role': 'checkbox',
'tappable': 'true', 'tappable': 'true',
'[attr.id]': 'id', 'class': 'item',
'[tabindex]': 'tabIndex', 'tabindex': 0,
'[attr.aria-checked]': 'checked', '[attr.aria-disabled]': 'disabled'
'[attr.aria-disabled]': 'disabled',
'[attr.aria-labelledby]': 'labelId',
'(click)': 'click($event)',
'class': 'item'
}, },
template: template:
'<div class="item-inner">' + '<div class="item-inner">' +
@ -55,18 +51,19 @@ export class Checkbox {
constructor( constructor(
private _form: Form, private _form: Form,
@Optional() ngControl: NgControl, private _elementRef: ElementRef,
elementRef: ElementRef private _renderer: Renderer,
@Optional() ngControl: NgControl
) { ) {
_form.register(this); _form.register(this);
this.onChange = (_) => {}; this.onChange = (_) => {};
this.onTouched = (_) => {}; this.onTouched = (_) => {};
this.tabIndex = 0;
this.ngControl = ngControl; this.ngControl = ngControl;
if (ngControl) {
if (ngControl) ngControl.valueAccessor = this; ngControl.valueAccessor = this;
}
} }
/** /**
@ -75,9 +72,11 @@ export class Checkbox {
ngOnInit() { ngOnInit() {
if (!this.id) { if (!this.id) {
this.id = 'chk-' + this._form.nextId(); this.id = 'chk-' + this._form.nextId();
this._renderer.setElementAttribute(this._elementRef, 'id', this.id);
} }
this.labelId = 'lbl-' + this.id; this.labelId = 'lbl-' + this.id;
this._renderer.setElementAttribute(this._elementRef, 'aria-labelledby', this.labelId);
} }
/** /**
@ -89,12 +88,22 @@ export class Checkbox {
this.onChange(this.checked); this.onChange(this.checked);
} }
get checked() {
return !!this._checked;
}
set checked(val) {
this._checked = val;
this._renderer.setElementAttribute(this._elementRef, 'aria-checked', !!val);
}
/** /**
* @private * @private
* Click event handler to toggle the checkbox checked state. * Click event handler to toggle the checkbox checked state.
* @param {MouseEvent} ev The click event. * @param {MouseEvent} ev The click event.
*/ */
click(ev) { @HostListener('click', ['$event'])
_click(ev) {
ev.preventDefault(); ev.preventDefault();
ev.stopPropagation(); ev.stopPropagation();
this.toggle(); this.toggle();