diff --git a/ionic/components.js b/ionic/components.js
index 81815dbd78..0c7e6a98b9 100644
--- a/ionic/components.js
+++ b/ionic/components.js
@@ -15,8 +15,7 @@ export * from 'ionic/components/list/list'
export * from 'ionic/components/nav/nav'
export * from 'ionic/components/nav/nav-item'
// export * from 'ionic/components/nav/decorators'
-// export * from 'ionic/components/radio/radio-button'
-// export * from 'ionic/components/radio/radio-group'
+export * from 'ionic/components/radio/radio'
// export * from 'ionic/components/search-bar/search-bar'
// export * from 'ionic/components/split-view/split-view'
export * from 'ionic/components/segment/segment'
diff --git a/ionic/components/radio/radio-button.js b/ionic/components/radio/radio-button.js
deleted file mode 100644
index f71f226088..0000000000
--- a/ionic/components/radio/radio-button.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import {NgElement, Component, View} from 'angular2/angular2'
-import {IonicComponent} from 'ionic/config/component'
-
-
-@Component({
- selector: 'ion-radio'
-})
-@View({
- template: `
-
- `
-})
-export class RadioButton {
- constructor(
- element: NgElement
- ) {
- this.domElement = element.domElement
- this.config = RadioButton.config.invoke(this)
-
- this.domElement.classList.add('item')
- this.domElement.setAttribute('aria-checked', true)
- }
-}
-
-new IonicComponent(RadioButton, {})
diff --git a/ionic/components/radio/radio-group.js b/ionic/components/radio/radio-group.js
deleted file mode 100644
index 850f6900a6..0000000000
--- a/ionic/components/radio/radio-group.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import {NgElement, Component, View} from 'angular2/angular2'
-import {IonicComponent} from 'ionic/config/component'
-
-
-@Component({
- selector: 'ion-radio-group'
-})
-@View({
- template: ``
-})
-export class RadioGroup {
- constructor(
- element: NgElement
- ) {
- this.domElement = element.domElement
- this.config = RadioGroup.config.invoke(this)
-
- this.domElement.classList.add('list')
- }
-}
-
-new IonicComponent(RadioGroup, {})
diff --git a/ionic/components/radio/radio.js b/ionic/components/radio/radio.js
new file mode 100644
index 0000000000..937ada8c60
--- /dev/null
+++ b/ionic/components/radio/radio.js
@@ -0,0 +1,151 @@
+import {ElementRef} from 'angular2/angular2'
+
+import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
+import {View} from 'angular2/src/core/annotations_impl/view';
+
+import {ControlGroup, ControlDirective} from 'angular2/forms'
+import {IonicComponent} from 'ionic/config/component'
+
+
+@Component({
+ selector: 'ion-radio-group'
+})
+@View({
+ template: ``
+})
+export class RadioGroup {
+ constructor(
+ elementRef: ElementRef,
+ cd:ControlDirective
+ ) {
+ this.domElement = elementRef.domElement
+ this.config = RadioGroup.config.invoke(this)
+ this.controlDirective = cd;
+ cd.valueAccessor = this; //ControlDirective should inject CheckboxControlDirective
+
+ this.domElement.classList.add('list');
+
+ this.buttons = [];
+ }
+
+ /**
+ * Much like ngModel, this is called from our valueAccessor for the attached
+ * ControlDirective to update the value internally.
+ */
+ writeValue(value) {
+ this.value = value;
+
+ setTimeout(() => {
+ this.selectFromValue(value);
+ })
+ }
+
+ /**
+ * Called by child SegmentButtons to bind themselves to
+ * the Segment.
+ */
+ register(radioButton) {
+ this.buttons.push(radioButton);
+
+ // If we don't have a default value, and this is the
+ // first button added, select it
+ if(!this.value && this.buttons.length === 1) {
+ setTimeout(() => {
+ // We need to defer so the control directive can initialize
+ this.selected(radioButton);
+ })
+ }
+ }
+
+ /**
+ * Select the button with the given value.
+ */
+ selectFromValue(value) {
+ for(let button of this.buttons) {
+ if(button.value === value) {
+ this.selected(button);
+ }
+ }
+ }
+
+
+ /**
+ * Indicate a button should be selected.
+ */
+ selected(radioButton) {
+ for(let button of this.buttons) {
+ button.setActive(false);
+ }
+ radioButton.setActive(true);
+
+ this.value = radioButton.value;
+ // TODO: Better way to do this?
+ this.controlDirective._control().updateValue(this.value);
+ }
+}
+
+new IonicComponent(RadioGroup, {})
+
+@Component({
+ selector: 'ion-radio',
+ hostListeners: {
+ '^click': 'buttonClicked($event)'
+ },
+ properties: {
+ value: 'value'
+ }
+})
+@View({
+ template: `
+
+ `
+})
+export class RadioButton {
+ constructor(
+ @Ancestor() group: RadioGroup,
+ elementRef: ElementRef
+ ) {
+ this.domElement = elementRef.domElement
+ this.config = RadioButton.config.invoke(this)
+
+ this.domElement.classList.add('item')
+ this.domElement.setAttribute('aria-checked', true)
+
+ this.group = group;
+
+ group.register(this);
+ }
+
+ setActive(isActive) {
+ // TODO: No domElement
+ if(isActive) {
+ this.domElement.classList.add('active');
+ this.domElement.setAttribute('aria-checked', true)
+ } else {
+ this.domElement.classList.remove('active');
+ this.domElement.setAttribute('aria-checked', false)
+ }
+ }
+
+ buttonClicked(event) {
+ this.group.selected(this, event);
+ event.preventDefault();
+ }
+
+}
+
+new IonicComponent(RadioButton, {
+
+})
diff --git a/ionic/components/radio/test/basic/index.js b/ionic/components/radio/test/basic/index.js
index 951b8c5bd0..b23921c846 100644
--- a/ionic/components/radio/test/basic/index.js
+++ b/ionic/components/radio/test/basic/index.js
@@ -2,20 +2,23 @@ import {bootstrap} from 'angular2/angular2'
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
-import {Content} from 'ionic/components/content/content';
-import {Icon} from 'ionic/components/icon/icon';
-import {RadioGroup} from 'ionic/components/radio/radio-group';
-import {RadioButton} from 'ionic/components/radio/radio-button';
+import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms';
+import {RadioGroup, RadioButton, Content, Button, List} from 'ionic/ionic';
@Component({ selector: 'ion-app' })
@View({
templateUrl: 'main.html',
- directives: [Content, RadioGroup, RadioButton]
+ directives: [FormDirectives].concat([RadioGroup, RadioButton, List, Content, Button])
})
class IonicApp {
constructor() {
console.log('IonicApp Start')
+
+ var fb = new FormBuilder();
+ this.form = fb.group({
+ preferredApple: ['mac', Validators.required],
+ });
}
}
diff --git a/ionic/components/radio/test/basic/main.html b/ionic/components/radio/test/basic/main.html
index 1f018f0eff..1376fcb08b 100644
--- a/ionic/components/radio/test/basic/main.html
+++ b/ionic/components/radio/test/basic/main.html
@@ -3,22 +3,33 @@
-
+
+
+ Current apple: {{form.controls.preferredApple.value}}
-