10、选择框：ion-select

最新推荐文章于 2025-02-27 06:02:14 发布

weixin_33716557

最新推荐文章于 2025-02-27 06:02:14 发布

阅读量381

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dandingjun/p/5562530.html

本文介绍了一个使用Ionic框架实现的选择框示例，通过设置multiple属性控制选择框的行为，展示如何创建单选与多选选择框，并通过按钮触发事件来获取当前的选择结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

！重点 multiple="true" 控制选择框是多选还是单选。true为多选类似 checkbox。

/* ---html----*/
 
<ion-content padding>
   
  <ion-list>
    <ion-item>
      <ion-label>单选</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>
  <button block (click)="radio()">单选框的select</button>
  <br />
 
  <ion-list>
    <ion-item>
      <ion-label>多选</ion-label>
      <ion-select multiple="true"  [(ngModel)]="gamingAll">
        <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>
  <button block (click)="checkbox()">多选框的select</button>
 
</ion-content>
 
/* ---html----*/

/* ---js----*/
 
import {Page} from 'ionic-angular';
 
@Page({
  templateUrl: 'build/pages/tabs/tabs.html',
})
 
export class TabsPage {
   
  constructor() {
    this.gaming = "n64"
    this.gamingAll = ["nes","n64"];
 
  }
  checkbox(){
      console.log(this.gamingAll)
  }
  radio(){
    console.log(this.gaming)
  }
 
}
 
/* ---js----*/