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] }); }