javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-08 23:58:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(demo): add select input

Browse Source
This commit is contained in:
Ken Sodemann
2017-11-17 17:34:34 -06:00
parent 1e73ec02de
commit 3709e39292
9 changed files with 107 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
packages/angular/demo/src/app/inputs/inputs-test-page.component.html
View File

@ -12,7 +12,7 @@
<ion-row>
<ion-col>
<label for="stdTextInput">Standard Input</label>
<input id="stdTextInput" name="stdTextInput" [(ngModel)]="textValue" minlength="10"/>
<input id="stdTextInput" name="stdTextInput" [(ngModel)]="textValue" minlength="10" />
</ion-col>
<ion-col>
Value:
@ -82,6 +82,44 @@
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<h2>Select</h2>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<label for="stdSelect">Standard Select (for tacos)</label>
<select id="stdSelect" name="stdSelect" [(ngModel)]="selectValue" (blur)="onBlur($event)">
<option value="beef">Carne Asada</option>
<option value="tongue">Lengua</option>
<option value="brains">Sesos</option>
<option value="tripe">Tripa</option>
<option value="chicken">Pollo</option>
</select>
</ion-col>
<ion-col>
Value:
<span id="selectOutput">{{selectValue}}</span>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-item>
<ion-label>Ionic Select (for tacos)</ion-label>
<ion-select id="ionSelect" name="ionSelect" [(ngModel)]="selectValue" (blur)="onBlur($event)">
<ion-select-option value="beef">Carne Asada</ion-select-option>
<ion-select-option value="tongue">Lengua</ion-select-option>
<ion-select-option value="brains">Sesos</ion-select-option>
<ion-select-option value="tripe">Tripa</ion-select-option>
<ion-select-option value="chicken">Pollo</ion-select-option>
</ion-select>
</ion-item>
</ion-col>
<ion-col>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<h2>Toggle</h2>

2
packages/angular/demo/src/app/inputs/inputs-test-page.component.ts
View File

@ -13,6 +13,8 @@ export class InputsTestPageComponent implements OnInit {
checkboxValue = true;
toggleValue = false;
selectValue = 'brains';
constructor() {}
ngOnInit() {}

1
packages/angular/demo/src/app/shared/ion-boolean-value-accessor/ion-boolean-value-accessor.directive.ts
View File

@ -3,6 +3,7 @@ import { ControlValueAccessor, DefaultValueAccessor, NG_VALUE_ACCESSOR } from '@
// NOTE: this is just a sample. It really belongs in @ionic/angular and not at all int his app here
@Directive({
/* tslint:disable-next-line:directive-selector */
selector: 'ion-checkbox,ion-toggle',
providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IonBooleanValueAccessorDirective, multi: true }]
})

42
packages/angular/demo/src/app/shared/ion-select-value-accessor/ion-select-value-accessor.directive.ts Normal file
View File

@ -0,0 +1,42 @@
import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
// NOTE: this is just a sample. It really belongs in @ionic/angular and not at all int his app here
// May also need to look at this to see if we need anything else:
// https://github.com/angular/angular/blob/5.0.2/packages/forms/src/directives/select_control_value_accessor.ts#L28-L158
@Directive({
/* tslint:disable-next-line:directive-selector */
selector: 'ion-select',
providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IonSelectValueAccessorDirective, multi: true }]
})
export class IonSelectValueAccessorDirective implements ControlValueAccessor {
constructor(private element: ElementRef, private renderer: Renderer2) {
this.onChange = () => {};
this.onTouched = () => {};
}
onChange: (value: any) => void;
onTouched: () => void;
writeValue(value: any) {
this.renderer.setProperty(this.element.nativeElement, 'value', value);
}
@HostListener('ionChange', ['$event.target.value'])
_handleChangeEvent(value: any) {
this.onChange(value);
}
@HostListener('ionBlur')
_handleBlurEvent() {
this.onTouched();
}
registerOnChange(fn: (value: any) => void) {
this.onChange = fn;
}
registerOnTouched(fn: () => void) {
this.onTouched = fn;
}
}

1
packages/angular/demo/src/app/shared/ion-text-value-accessor/ion-text-value-accessor.directive.ts
View File

@ -5,6 +5,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
// May also need to look at this to see if we need anything else:
// https://github.com/angular/angular/blob/5.0.1/packages/forms/src/directives/default_value_accessor.ts#L33-L101
@Directive({
/* tslint:disable-next-line:directive-selector */
selector: 'ion-input,ion-textarea',
providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IonTextValueAccessorDirective, multi: true }]
})

5
packages/angular/demo/src/app/shared/shared.module.ts
View File

@ -1,10 +1,11 @@
import { NgModule } from '@angular/core';
import { IonBooleanValueAccessorDirective } from './ion-boolean-value-accessor/ion-boolean-value-accessor.directive';
import { IonSelectValueAccessorDirective } from './ion-select-value-accessor/ion-select-value-accessor.directive';
import { IonTextValueAccessorDirective } from './ion-text-value-accessor/ion-text-value-accessor.directive';
@NgModule({
exports: [IonBooleanValueAccessorDirective, IonTextValueAccessorDirective],
declarations: [IonBooleanValueAccessorDirective, IonTextValueAccessorDirective]
exports: [IonBooleanValueAccessorDirective, IonSelectValueAccessorDirective, IonTextValueAccessorDirective],
declarations: [IonBooleanValueAccessorDirective, IonSelectValueAccessorDirective, IonTextValueAccessorDirective]
})
export class SharedModule { }