zoukankan      html  css  js  c++  java
  • 10、选择框:ion-select

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

  • 相关阅读:
    Dubbo介绍以及Dubbo Admin的安装
    CentOS下安Zookeeper服务
    Linux定时备份mysql数据库
    Spring Boot 整合Mybatis 框架以及使用
    Sprint Boot日志功能的使用
    Centos下安装Redis服务
    Java 通用md5工具类
    Screen 用法简述
    解决zabbix的cannot allocate shared memory of size错误
    Python 之禅
  • 原文地址:https://www.cnblogs.com/dandingjun/p/5562530.html
Copyright © 2011-2022 走看看