mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-21 13:01:01 +08:00
56 lines
2.0 KiB
HTML
56 lines
2.0 KiB
HTML
<ion-toolbar>
|
|
<ion-title>Select Item: Multiple Value</ion-title>
|
|
</ion-toolbar>
|
|
|
|
<ion-content class="outer-content">
|
|
|
|
<ion-item>
|
|
<ion-label>Toppings</ion-label>
|
|
<ion-select [(ngModel)]="toppings" multiple="true" cancelText="Nah" okText="Okay!" class="e2eSelectToppings">
|
|
<ion-option value="bacon" checked="true">Bacon</ion-option>
|
|
<ion-option value="olives">Black Olives</ion-option>
|
|
<ion-option value="xcheese" checked="true">Extra Cheese</ion-option>
|
|
<ion-option value="peppers">Green Peppers</ion-option>
|
|
<ion-option value="mushrooms">Mushrooms</ion-option>
|
|
<ion-option value="onions">Onions</ion-option>
|
|
<ion-option value="pepperoni">Pepperoni</ion-option>
|
|
<ion-option value="pineapple">Pineapple</ion-option>
|
|
<ion-option value="sausage">Sausage</ion-option>
|
|
<ion-option value="Spinach">Spinach</ion-option>
|
|
</ion-select>
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-label>Car Features</ion-label>
|
|
<ion-select [(ngModel)]="carFeatures" [multiple]="true" (change)="carChange($event)">
|
|
<ion-option value="backupcamera">Backup Camera</ion-option>
|
|
<ion-option value="heatedseats">Headted Seats</ion-option>
|
|
<ion-option value="keyless">Keyless Entry</ion-option>
|
|
<ion-option value="navigation">Navigation</ion-option>
|
|
<ion-option value="parkingassist">Parking Assist</ion-option>
|
|
<ion-option value="sunroof">Sun Roof</ion-option>
|
|
</ion-select>
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-label>Pets</ion-label>
|
|
<ion-select [(ngModel)]="pets" multiple>
|
|
<ion-option *ngFor="#o of petOptions" [value]="o.value" [checked]="o.checked">{{o.text}}</ion-option>
|
|
</ion-select>
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-label>Disabled</ion-label>
|
|
<ion-select multiple disabled>
|
|
<ion-option checked="true">Selected Text</ion-option>
|
|
</ion-select>
|
|
</ion-item>
|
|
|
|
<p aria-hidden="true" padding>
|
|
<code>toppings: {{toppings}}</code><br>
|
|
<code>carFeatures: {{carFeatures}}</code><br>
|
|
<code>pets: {{pets}}</code><br>
|
|
</p>
|
|
|
|
</ion-content>
|