離子2選擇：刪除選定的選項

我在表單中使用離子選擇組件，但遇到了一個問題：如果用戶選擇一個選項，但然後想要刪除它，它不會給出選項。我可以添加空白值<ion-option>，但認爲它不會很好。有沒有更好的方法來解決這個問題？離子2選擇：刪除選定的選項

編輯：這是我的選擇選項的外觀現在：

如果用戶選擇一個選項，然後改變了主意，不想選擇任何選項，但似乎並不很清楚他能做到這一點的方式。即使添加一個空白值的「刪除選項」，它仍然看起來像一個選項，對我來說似乎不好。使用傳統的選擇，沒有文字的空白選項看起來非常直觀。但在這種情況下，我正在考慮像「（X）Remove selected」這樣的東西，在頁腳的「Cancelar/Confirmar」選項附近，或類似的東西。有任何想法嗎？ Ps：另外，離子選項似乎剝離我放在我的選項上的任何html標記，所以它格式化我的「選擇無」選項保持相當艱難

來源

2017-05-05 Ronan Lopes

請問您可以將相關代碼添加到問題中嗎？ – sebaferreras

你如何刪除選定的選項？ –

用一些細節編輯這個問題！ –

@ sonu的解決方案將工作，如果用戶想再次點擊ion-select並選擇select-nothing選項，但我不覺得這是一個愉快的經歷。

的另一種方式得到你想要的東西是用一個小的清除按鈕旁邊的ion-select，只有當用戶已經選擇了一些東西，出現：

<ion-label>Options</ion-label> 
    <ion-select [(ngModel)]="option"> 
    <ion-option value="f">Female</ion-option> 
    <ion-option value="m">Male</ion-option> 
    </ion-select> 

    <div *ngIf="option=='m' || option=='f'"> 
    <ion-label> {{option}} </ion-label> 
    <ion-button (click)='removeSelection()'> 
     <ion-icon name='close'></ion-icon> 
    </ion-button> 
    </div>

哪裏removeSelection()是改變功能選擇到"No selection"，也許通過設置this.option=null。

當然，您可以根據需要設計這個按鈕。你也可以看看離子chips。特別是，刪除芯片是實現您的意圖的一種方式。

來源

2017-05-18 18:08:50 Ari

這正是我所說的！非常感謝您的時間。好的答案=） –

這是更好的方式來選擇與空值value.You可以使用代碼爲每個離子docs

例如：

<ion-label>Gender</ion-label> 
    <ion-select [(ngModel)]="gender"> 
    <ion-option value="">Select Gender</ion-option> 
    <ion-option value="f">Female</ion-option> 
    <ion-option value="m">Male</ion-option> 
    </ion-select>

或者你可以進行選擇明確添加任何事件。

來源

2017-05-18 11:00:33 sonu

添加了一些細節和截圖。謝謝！ –

離子2選擇：刪除選定的選項

回答

相關問題