This commit is contained in:
Max Lynch
2015-05-08 15:44:41 -05:00
parent 966a02900d
commit e7534060ab
3 changed files with 55 additions and 24 deletions

View File

@ -1,4 +1,5 @@
import {NgElement, Renderer, ElementRef, Component, DefaultValueAccessor, View, Ancestor, Optional, Decorator, Directive} from 'angular2/angular2'
import {ControlGroup, ControlDirective} from 'angular2/forms'
import {dom} from 'ionic/util';
import {IonicComponent} from 'ionic/config/component'
import {Button} from 'ionic/components/button/button'
@ -15,22 +16,37 @@ import {Button} from 'ionic/components/button/button'
<content></content>
</div>
`,
directives: [Button, SegmentButton]
directives: [Button, SegmentButton],
properties: {
value: 'value'
},
hostProperties: {
value: 'value'
}
})
export class Segment {
constructor(
@NgElement() ngElement:NgElement,
elementRef: ElementRef,
renderer: Renderer
renderer: Renderer,
cd:ControlDirective
) {
this.domElement = ngElement.domElement
this.config = Segment.config.invoke(this)
this.elementRef = elementRef;
this.renderer = renderer;
this.controlDirective = cd;
console.log('Segment with cd', cd);
cd.valueAccessor = this; //ControlDirective should inject CheckboxControlDirective
this.buttons = [];
}
writeValue(value) {
console.log('SEGMENT WRITE VALUE', value);
}
bindButton(segmentValue) {
this.buttons.push(segmentValue);
let index = this.buttons.length;
@ -46,6 +62,8 @@ export class Segment {
button.setActive(false);
}
segmentButton.setActive(true);
this.value = segmentButton.value;
}
}

View File

@ -1,29 +1,32 @@
<ion-content class="padding">
<form (^submit)="doSubmit($event)" [control-group]="form">
<ion-segment>
<ion-segment-button value="standard" ion-button>
Standard
</ion-segment-button>
<ion-segment-button value="hybrid" ion-button>
Hybrid
</ion-segment-button>
<ion-segment-button value="sat" ion-button>
Satellite
</ion-segment-button>
<!--
<button ion-button class="active" [segment-value]="standard">
Standard
</button>
<ion-segment control="mapStyle">
<ion-segment-button value="standard" ion-button>
Standard
</ion-segment-button>
<ion-segment-button value="hybrid" ion-button>
Hybrid
</ion-segment-button>
<ion-segment-button value="sat" ion-button>
Satellite
</ion-segment-button>
<!--
<button ion-button class="active" [segment-value]="standard">
Standard
</button>
<button ion-button [segment-value]="hybrid">
Hybrid
</button>
<button ion-button [segment-value]="hybrid">
Hybrid
</button>
<button #sat ion-button [segment-value]="sat">
Satellite
</button>
-->
<button #sat ion-button [segment-value]="sat">
Satellite
</button>
-->
</ion-segment>
</ion-segment>
<button type="submit" button primary>Submit</button>
</form>
</ion-content>

View File

@ -9,6 +9,16 @@ import {IONIC_DIRECTIVES} from 'ionic/ionic'
})
class IonicApp {
constructor() {
var fb = new FormBuilder();
this.form = fb.group({
mapStyle: ['', Validators.required]
});
}
doSubmit(event) {
console.log('Submitting form', this.form.value);
event.preventDefault();
}
}