Select

http://ionicframework.com/docs/v2/components/#select

基本用法

ion-select组件很类似HTML中的select元素,然而Ionic的选择组件让用户选择起来更简单。当用户点击选择组件的时候,将会出现一个包含所有选择项的对话框,很容易选择其中的列表项。

更多内容请查看API文档。

<ion-list> 
    <ion-item> 
        <ion-label>Gaming</ion-label> 
        <ion-select [(ngModel)]="gaming"> 
            <ion-option value="nes">NES</ion-option> 
            <ion-option value="n64">Nintendo64</ion-option> 
            <ion-option value="ps">PlayStation</ion-option> 
            <ion-option value="genesis">Sega Genesis</ion-option> 
            <ion-option value="saturn">Sega Saturn</ion-option> 
            <ion-option value="snes">SNES</ion-option> 
        </ion-select> 
    </ion-item> 
</ion-list>

如果要实现多选,给ion-select组件添加multiple="true"即可。

<ion-list>
    <ion-item>
        <ion-label>Toppings</ion-label>
        <ion-select [(ngModel)]="toppings" multiple="true" cancelText="Nah" okText="Okay!">
            <ion-option value="bacon" checked="true">Bacon</ion-option>
            <ion-option value="olives">Black Olives</ion-option>
            <ion-option value="xcheese" checked="true">Extra Cheese</ion-option>
            <ion-option value="peppers">Green Peppers</ion-option>
            <ion-option value="mushrooms">Mushrooms</ion-option>
            <ion-option value="onions">Onions</ion-option>
            <ion-option value="pepperoni">Pepperoni</ion-option>
            <ion-option value="pineapple">Pineapple</ion-option>
            <ion-option value="sausage">Sausage</ion-option>
            <ion-option value="Spinach">Spinach</ion-option>
            </ion-select>
    </ion-item>
</ion-list>

results matching ""

    No results matching ""