时间戳

首页 > 解决方案 > 如何将浮动标签应用于具有禁用选项的 ionic2 下拉菜单？

ionic2 - 如何将浮动标签应用于具有禁用选项的 ionic2 下拉菜单？

问题描述

我需要使用带有浮动离子标签的禁用选择选项来实现离子下拉菜单。我该怎么做？禁用的选项值和标签值不应合并。我的代码如下所示：

<ion-label floating>Item Name*</ion-label>
                        <ion-select interface="popover" [(ngModel)]="obj.item_name" [ngModelOptions]="{standalone: true}" (ionChange)="onOptionChange()"
                          required>
                          <ion-option disabled selected value="">Please Select</ion-option> 
                          <ion-option value="item1">item1</ion-option>
                          <ion-option value="item2">item2</ion-option>
                        </ion-select>

标签： ionic2ionic3

解决方案

使用 ion-item 包含标签并像这样选择

<ion-item>
<ion-label floating>Item Name*</ion-label>
<ion-select floating interface="popover"  [(ngModel)]="obj.item_name" [ngModelOptions]="{standalone: true}" (ionChange)="onOptionChange()" required>
  <ion-option selected value="">Please Select</ion-option> 
  <ion-option value="item1">item1</ion-option>
  <ion-option value="item2">item2</ion-option>
</ion-select>
</ion-item>

编辑

要让 Please Select 在没有它的情况下显示为<ion-option>，只需包含placeholder="Please Select"在您的<ion-select>元素内部。

推荐阅读