Select

ion-select和html中的select有点相似。

单选

  1. <ion-item>
  2.   <ion-label>Gender</ion-label>
  3.   <ion-select [(ngModel)]="gender">
  4.     <ion-option value="f" checked="true">Female</ion-option>
  5.     <ion-option value="m">Male</ion-option>
  6.   </ion-select>
  7. </ion-item>

多选

  1. <ion-item>
  2.   <ion-label>Toppings</ion-label>
  3.   <ion-select [(ngModel)]="toppings" multiple="true">
  4.     <ion-option>Bacon</ion-option>
  5.     <ion-option>Black Olives</ion-option>
  6.     <ion-option>Extra Cheese</ion-option>
  7.     <ion-option>Mushrooms</ion-option>
  8.     <ion-option>Pepperoni</ion-option>
  9.     <ion-option>Sausage</ion-option>
  10.   </ion-select>
  11. <ion-item>

Alert按钮

默认为Cancel和OK

  1. <ion-select okText="Okay" cancelText="Dismiss">
  2.   ...
  3. </ion-select>

Alert选项

使用alertOptions可以覆盖Alert的配置。例如可以更改标题。

  1. <ion-select [alertOptions]="alertOptions">
  2.   ...
  3. </ion-select>
  5. this.alertOptions = {
  6.   title: 'Pizza Toppings',
  7.   subTitle: 'Select your toppings'
  8. };

输入

  • multiple boolean

    是否可以接受多个选项

  • disabled boolean

    组件是否被禁用

输出事件

  • change

    当选项改变时触发

  • cancel

    取消时触发