码迷,mamicode.com
首页 > 其他好文 > 详细

10、选择框:ion-select

时间:2016-06-06 06:40:44      阅读:429      评论:0      收藏:0      [点我收藏+]

标签:

!重点 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----*/

技术分享

10、选择框:ion-select

标签:

原文地址:http://www.cnblogs.com/dandingjun/p/5562530.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!