diff --git a/ionic/components/segment/segment.js b/ionic/components/segment/segment.js
index 119d6db8d5..656e20065b 100644
--- a/ionic/components/segment/segment.js
+++ b/ionic/components/segment/segment.js
@@ -36,37 +36,65 @@ export class Segment {
this.elementRef = elementRef;
this.renderer = renderer;
this.controlDirective = cd;
- console.log('Segment with cd', cd);
cd.valueAccessor = this; //ControlDirective should inject CheckboxControlDirective
this.buttons = [];
}
+ /**
+ * Much like ngModel, this is called from our valueAccessor for the attached
+ * ControlDirective to update the value internally.
+ */
writeValue(value) {
- console.log('SEGMENT WRITE VALUE', value);
this.value = value;
+
+ setTimeout(() => {
+ this.selectFromValue(value);
+ })
}
- bindButton(segmentValue) {
- this.buttons.push(segmentValue);
- let index = this.buttons.length;
- console.log('Bound button', index);
- }
-
+ /**
+ * Called by child SegmentButtons to bind themselves to
+ * the Segment.
+ */
register(segmentButton) {
this.buttons.push(segmentButton);
+
+ // 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(segmentButton);
+ })
+ }
}
- selected(event, segmentButton) {
+ /**
+ * 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(segmentButton) {
for(let button of this.buttons) {
button.setActive(false);
}
segmentButton.setActive(true);
this.value = segmentButton.value;
+ // TODO: Better way to do this?
this.controlDirective._control().updateValue(this.value);
- console.log('New value', this.value);
}
}
@@ -85,13 +113,6 @@ new IonicComponent(Segment, {
@View({
template: ''
})
-/*
-@Directive({
- hostListeners: {
- mouseover: 'buttonClicked'
- }
-})
-*/
export class SegmentButton {
constructor(
@Ancestor() segment: Segment,
@@ -115,7 +136,7 @@ export class SegmentButton {
}
buttonClicked(event) {
- this.segment.selected(event, this);
+ this.segment.selected(this, event);
}
}
diff --git a/ionic/components/segment/test/basic/main.html b/ionic/components/segment/test/basic/main.html
index f16a32431a..24a8f0c4e2 100644
--- a/ionic/components/segment/test/basic/main.html
+++ b/ionic/components/segment/test/basic/main.html
@@ -29,4 +29,5 @@
+ Map mode: {{form.controls.mapStyle.value}}
diff --git a/ionic/components/segment/test/basic/main.js b/ionic/components/segment/test/basic/main.js
index d6029220f6..7bff117e52 100644
--- a/ionic/components/segment/test/basic/main.js
+++ b/ionic/components/segment/test/basic/main.js
@@ -12,7 +12,7 @@ class IonicApp {
var fb = new FormBuilder();
this.form = fb.group({
- mapStyle: ['', Validators.required]
+ mapStyle: ['hybrid', Validators.required]
});
}