Question

我正在尝试在Ionic 3中重新创建以下内容（请参阅GIF链接）。我不知道我在做什么。我曾尝试使用离子选择选项，但它没有给我预期的效果。有人可以帮帮我吗？

下拉选择：

更多信息：

目前我在这一点上： Current Progress

如你所见，非常远。我的代码是：

<ion-grid>
    <ion-row>
        <ion-col col-3>
            <ion-item>
                <ion-label stacked>Filter</ion-label>
                <ion-select interface="popover">
                    <ion-option value="10">10</ion-option>
                    <ion-option value="20">20</ion-option>
                </ion-select>
            </ion-item>
        </ion-col>
        <ion-col col-3>
            <ion-item>
                <ion-label>Due Date</ion-label>
                <ion-select interface="popover">
                    <ion-option value="10">10</ion-option>
                    <ion-option value="20">20</ion-option>
                </ion-select>
            </ion-item>
        </ion-col>
        <ion-col col-3>
            <ion-item>
                <ion-label>Descending</ion-label>
                <ion-select interface="popover">
                    <ion-option value="10">10</ion-option>
                    <ion-option value="20">20</ion-option>
                </ion-select>
            </ion-item>
        </ion-col>
    </ion-row>
</ion-grid>

Answer 1

下面是来自下拉列表的html代码..它不是你想要的......但我希望你能得到一些想法：

在.ts文件中声明变量： selectedLeave : string = '';

在html文件中添加以下代码：

<ion-item class="item-leave-height">
    <ion-label>SELECT LEAVE</ion-label>
    <ion-select [(ngModel)]="selectedLeave">
        <ion-option value="CASUAL LEAVE">Casual Leave</ion-option>
        <ion-option value="COMP OFF">Comp Off</ion-option>
        <ion-option value="EARNED LEAVE">Earned Leave</ion-option>
        <ion-option value="SICK LEAVE">Sick Leave</ion-option>
    </ion-select>
</ion-item>

Answer 2

我建议使用Popover Controller。使用ion-select生成一个新页面，并将其命名为：

 presentPopover(myEvent) {
    let popover = this.popoverCtrl.create("YourPopoverPage");
    popover.present({
      ev: myEvent
    });
  }

这应该在你的html中选择：

<div (click)="presentPopover($event)" style="display:flex; float:right;">
          <ion-label style="text-align:right;">Klick</ion-label>
          <ion-icon name="md-arrow-dropdown" id="icon_lang"></ion-icon>
    </div>

Answer 3

即使您使用的是离子型，也不意味着您不能使用常规的html select组件。

<select name="carlist" form="carform">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Answer 4

<ion-list>
  <ion-item>
     <ion-label>Color</ion-label>
            <ion-select>
                <ion-option  value="1">1</ion-option>
                <ion-option  value="1">2</ion-option>
                <ion-option  value="1">3</ion-option>
                <ion-option  value="1">4</ion-option>
            </ion-select>
    </ion-item>
</ion-list>

离子3 - 下拉选择

4 个答案: