mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 20:33:32 +08:00
@ -186,7 +186,7 @@ export class Select implements AfterContentInit, ControlValueAccessor, OnDestroy
|
|||||||
@Input() interface: string = '';
|
@Input() interface: string = '';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @input {string} The selected text should be showen.
|
* @input {string} The text to display instead of the selected option's value.
|
||||||
*/
|
*/
|
||||||
@Input() selectedText: string = '';
|
@Input() selectedText: string = '';
|
||||||
|
|
||||||
|
@ -1,38 +1,57 @@
|
|||||||
import {Component} from '@angular/core';
|
import {Component} from '@angular/core';
|
||||||
import {ionicBootstrap} from '../../../../../src';
|
import {ionicBootstrap} from '../../../../../src';
|
||||||
|
|
||||||
|
export interface Currency {
|
||||||
|
symbol: string;
|
||||||
|
code: string;
|
||||||
|
name: string;
|
||||||
|
}
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
templateUrl: 'main.html'
|
templateUrl: 'main.html'
|
||||||
})
|
})
|
||||||
class E2EPage {
|
class E2EPage {
|
||||||
musicAlertOpts: any;
|
musicAlertOpts: any = {
|
||||||
|
title: '1994 Music',
|
||||||
|
subTitle: 'Select your favorite',
|
||||||
|
cssClass: 'music-select'
|
||||||
|
};
|
||||||
gender: string;
|
gender: string;
|
||||||
gaming: string;
|
gaming: string = '';
|
||||||
os: string;
|
os: string = 'win3.1';
|
||||||
music: string;
|
years: Array<number> = [1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999];
|
||||||
month: string;
|
music: string = null;
|
||||||
year: string;
|
month: string = '12';
|
||||||
years: Array<number>;
|
year: string = '1994';
|
||||||
notification: string;
|
notification: string = 'enable';
|
||||||
status: string;
|
status: string = "checked";
|
||||||
|
|
||||||
|
currencies: Currency[] = [
|
||||||
|
{
|
||||||
|
symbol: '$',
|
||||||
|
code: 'USD',
|
||||||
|
name: 'US Dollar'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
symbol: '€',
|
||||||
|
code: 'EUR',
|
||||||
|
name: 'Euro'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
symbol: '£',
|
||||||
|
code: 'FKP',
|
||||||
|
name: 'Falkland Islands Pound'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
symbol: '¢',
|
||||||
|
code: 'GHS',
|
||||||
|
name: 'Ghana Cedi'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
currency: Currency;
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
this.gaming = '';
|
this.currency = this.currencies[0];
|
||||||
this.os = 'win3.1';
|
|
||||||
this.music = null;
|
|
||||||
this.month = '12';
|
|
||||||
this.year = '1994';
|
|
||||||
this.notification = 'enable';
|
|
||||||
this.status = "checked";
|
|
||||||
|
|
||||||
this.years = [1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999];
|
|
||||||
|
|
||||||
this.musicAlertOpts = {
|
|
||||||
title: '1994 Music',
|
|
||||||
subTitle: 'Select your favorite',
|
|
||||||
cssClass: 'music-select'
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
|
|
||||||
gamingCancel() {
|
gamingCancel() {
|
||||||
@ -50,6 +69,10 @@ class E2EPage {
|
|||||||
resetGender() {
|
resetGender() {
|
||||||
this.gender = null;
|
this.gender = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
selectedText() {
|
||||||
|
return this.currency.symbol;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -95,6 +95,15 @@
|
|||||||
</ion-select>
|
</ion-select>
|
||||||
</ion-item>
|
</ion-item>
|
||||||
|
|
||||||
|
<ion-item>
|
||||||
|
<ion-label>Currency</ion-label>
|
||||||
|
<ion-select [(ngModel)]="currency" [selectedText]="selectedText()">
|
||||||
|
<ion-option *ngFor="let cur of currencies" [value]="cur">
|
||||||
|
{{cur.symbol}} ({{cur.code}}) {{cur.name}}
|
||||||
|
</ion-option>
|
||||||
|
</ion-select>
|
||||||
|
</ion-item>
|
||||||
|
|
||||||
<button (click)="resetGender()">Reset Gender</button>
|
<button (click)="resetGender()">Reset Gender</button>
|
||||||
|
|
||||||
<p aria-hidden="true" padding>
|
<p aria-hidden="true" padding>
|
||||||
@ -108,6 +117,8 @@
|
|||||||
<br>
|
<br>
|
||||||
<code>date: {{month}}/{{year}}</code>
|
<code>date: {{month}}/{{year}}</code>
|
||||||
<br>
|
<br>
|
||||||
|
<code>currency: {{currency | json}}</code>
|
||||||
|
<br>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
</ion-content>
|
</ion-content>
|
||||||
|
Reference in New Issue
Block a user