mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 21:48:42 +08:00
b5b804725f
BREAKING CHANGES: The Option component’s `checked` attribute has been renamed to `selected` in order to select an option. This is to the follow the MDN spec for a select option: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option If a `ngModel` is added to the Select component the value of the `ngModel` will take precedence over the `selected` attribute. references #7334
69 lines
1.5 KiB
HTML
69 lines
1.5 KiB
HTML
<ion-header>
|
|
|
|
<ion-navbar>
|
|
<ion-title>Local Storage</ion-title>
|
|
</ion-navbar>
|
|
|
|
</ion-header>
|
|
|
|
|
|
<ion-content class="local-storage-demo outer-content">
|
|
|
|
<ion-list no-margin>
|
|
<ion-list-header>Add to Local Storage</ion-list-header>
|
|
|
|
<ion-item>
|
|
<ion-label>Key</ion-label>
|
|
<ion-select [(ngModel)]="myItem.key">
|
|
<ion-option *ngFor="let key of keys" [value]="key">
|
|
{{ key }}
|
|
</ion-option>
|
|
</ion-select>
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-label>Value</ion-label>
|
|
<ion-select [(ngModel)]="myItem.value">
|
|
<ion-option *ngFor="let value of values" [value]="value">
|
|
{{ value }}
|
|
</ion-option>
|
|
</ion-select>
|
|
</ion-item>
|
|
|
|
</ion-list>
|
|
|
|
<div padding>
|
|
<button block secondary (click)="set()">
|
|
<ion-icon name="add"></ion-icon>
|
|
Add
|
|
</button>
|
|
</div>
|
|
|
|
<ion-list no-margin>
|
|
<ion-list-header>Delete from Local Storage</ion-list-header>
|
|
|
|
<ion-item>
|
|
<ion-label>Key</ion-label>
|
|
<ion-select [(ngModel)]="delKey">
|
|
<ion-option selected>Select a Key</ion-option>
|
|
<ion-option *ngFor="let key of addedKeys" [value]="key">
|
|
{{ key }}
|
|
</ion-option>
|
|
</ion-select>
|
|
</ion-item>
|
|
</ion-list>
|
|
|
|
<div padding>
|
|
<button block danger (click)="remove()">
|
|
<ion-icon name="remove"></ion-icon>
|
|
Delete
|
|
</button>
|
|
</div>
|
|
|
|
<div padding>
|
|
<h5>Local Storage:</h5>
|
|
<pre>local: {{ localStorageDemo | cleanLocalData }}</pre>
|
|
</div>
|
|
|
|
</ion-content>
|