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

SEGMENT

Browse Source
This commit is contained in:
Max Lynch
2015-06-25 13:04:57 -05:00
parent e42daa3f78
commit 027defea79
3 changed files with 19 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
ionic/components/segment/segment.js
View File

@ -65,7 +65,7 @@ export class Segment {
static get config() { static get config() {
return { return {
selector: 'ion-segment', selector: 'ion-segment',
appInjector: [ NgFormControl ], appInjector: [ NgControl ],
properties: [ properties: [
'value' 'value'
], ],
@ -85,7 +85,7 @@ export class Segment {
} }
constructor( constructor(
cd: NgFormControl, cd: NgControl,
elementRef: ElementRef, elementRef: ElementRef,
renderer: Renderer renderer: Renderer
) { ) {
@ -135,9 +135,9 @@ export class Segment {
*/ */
selected(segmentButton) { selected(segmentButton) {
for(let button of this.buttons) { for(let button of this.buttons) {
button.setActive(false); button.isActive = false;
} }
segmentButton.setActive(true); segmentButton.isActive = true;
//this.onChange(); //this.onChange();
@ -147,7 +147,7 @@ export class Segment {
this.cd.valueAccessor.writeValue(segmentButton.value); this.cd.valueAccessor.writeValue(segmentButton.value);
this.selectFromValue(segmentButton.value); this.selectFromValue(segmentButton.value);
this.cd.form.updateValue(segmentButton.value); this.cd.control.updateValue(segmentButton.value);
// Trigger on change // Trigger on change
this.change.next(); this.change.next();
@ -185,10 +185,6 @@ export class SegmentButton {
this.segment.register(this); this.segment.register(this);
} }
setActive(isActive) {
this.isActive = isActive;
}
buttonClicked(event) { buttonClicked(event) {
this.segment.selected(this, event); this.segment.selected(this, event);
event.preventDefault(); event.preventDefault();

19
ionic/components/segment/test/basic/index.js
View File

@ -4,26 +4,21 @@ import {formDirectives, FormBuilder, Validators, Control, ControlGroup} from 'an
import {IonicView} from 'ionic/ionic'; import {IonicView} from 'ionic/ionic';
@Component({ selector: 'ion-app' }) @Component({
selector: 'ion-app',
appInjector: [FormBuilder]
})
@IonicView({ @IonicView({
templateUrl: 'main.html', templateUrl: 'main.html',
directives: [formDirectives] directives: [formDirectives]
}) })
class IonicApp { class IonicApp {
constructor() { constructor(fb: FormBuilder) {
this.mapStyle = new Control("hybrid", Validators.required); this.myForm = fb.group({
this.form = new ControlGroup({
"mapStyle": this.mapStyle
});
/*
var fb = new FormBuilder();
this.form = fb.group({
mapStyle: ['hybrid', Validators.required] mapStyle: ['hybrid', Validators.required]
}); });
*/ console.log(this.myForm);
console.log(this.form);
} }
doSubmit(event) { doSubmit(event) {

16
ionic/components/segment/test/basic/main.html
View File

@ -1,7 +1,6 @@
<ion-content class="padding"> <ion-content class="padding">
<form (^submit)="doSubmit($event)"> <form (^submit)="doSubmit($event)" [ng-form-model]="myForm">
<div ng-control-group="form"> <ion-segment ng-control="mapStyle">
<ion-segment [ng-form-control]="mapStyle">
<ion-segment-button value="standard" button> <ion-segment-button value="standard" button>
Standard Standard
</ion-segment-button> </ion-segment-button>
@ -12,20 +11,19 @@
Satellite Satellite
</ion-segment-button> </ion-segment-button>
</ion-segment> </ion-segment>
</div>
<button type="submit" button primary>Submit</button> <button type="submit" button primary>Submit</button>
</form> </form>
Map mode: <b>{{form.controls.mapStyle.value}}</b> Map mode: <b>{{myForm.controls.mapStyle.value}}</b>
<div [switch]="form.controls.mapStyle.value"> <div [ng-switch]="myForm.controls.mapStyle.value">
<div *switch-when="'standard'"> <div *ng-switch-when="'standard'">
<h2>Standard</h2> <h2>Standard</h2>
</div> </div>
<div *switch-when="'hybrid'"> <div *ng-switch-when="'hybrid'">
<h2>Hybrid</h2> <h2>Hybrid</h2>
</div> </div>
<div *switch-when="'sat'"> <div *ng-switch-when="'sat'">
<h2>Satellite!!</h2> <h2>Satellite!!</h2>
</div> </div>
</div> </div>