为什么我的Ionic选择菜单不起作用?

时间:2017-11-14 16:43:20

标签: ionic-framework mobile ionic2 user-experience

我是Ionic的新手。我想设计一个汽车共享应用程序。我想制作一个“选择目的地”下拉菜单,其中包含频繁的选项(如“此处”,“主页”或“任意位置”)和特殊的“选择目的地”选项。

理想情况下,此选项看起来像另一个下拉菜单(带有小三角形),并打开一个带有输入的模态,可以选择一个地址(我还没有,我必须与谷歌地图或OSM ......无论如何)。

My current UI

我尝试了以下代码

    <ion-card>
    <ion-card-header>
        Where are you going?    
    </ion-card-header>
    <ion-card-content>
        <ion-item>
            <ion-label>Destination</ion-label>
            <ion-select [(ngModel)]="destination">
                <ion-option>Here</ion-option>
                <ion-option>Home</ion-option>
                <ion-option>Work</ion-option>
                <ion-option>
                    <ion-item>
                        <ion-label fixed>Choose a destination</ion-label>
                        <ion-select [(ngModel)]="destination_chosen">
                        </ion-select> 
                    </ion-item>
                </ion-option>
                <ion-option>Anywhere</ion-option>
            </ion-select>   
        </ion-item>
    </ion-card-content>
</ion-card>

但看起来它没有被考虑在内。我做错了什么?它甚至可能吗?如果没有,那么在这种情况下,是否有人会想到一个好的用户体验模式?

1 个答案:

答案 0 :(得分:0)

一个简单的解决方案是更改模态的视图,以显示您希望选择该选项的实际下拉菜单,就像它是第二步一样。第二种不同的模态并不理想,因为将模态置于另一种模态中并不是一种良好的用户体验。因为它是各个步骤过程的一部分,所以不会感到奇怪。

因此,不必是同一个视图的一部分,你必须创建第二个,使用JS应该很简单,或者使用Angular更容易。一个简单的ng-show条件应该这样做。