1、npm install ion-multi-picker --save

2、引入

import { MultiPickerModule } from 'ion-multi-picker';
imports: [
  MultiPickerModule,
],
this.simpleColumns = [{
  name: 'col1',
  options: [
    { text: '1', value: '1' },
    { text: '2', value: '2' },
    { text: '3', value: '3' }
  ]
},{
  name: 'col2',
  options: [
    { text: '1-1', value: '1-1' },
    { text: '1-2', value: '1-2' },
    { text: '2-1', value: '2-1' },
    { text: '2-2', value: '2-2' },
    { text: '3-1', value: '3-1' }
  ]
},{
  name: 'col3',
  options: [
    { text: '1-1-1', value: '1-1-1' },
    { text: '1-1-2', value: '1-1-2' },
    { text: '1-2-1', value: '1-2-1' },
    { text: '1-2-2', value: '1-2-2' },
    { text: '2-1-1', value: '2-1-1' },
  ]
}];
3、

<ion-multi-picker item-content [multiPickerColumns]="simpleColumns" [cancelText]="'取消'" [doneText]="'完成'" [(ngModel)]="address"></ion-multi-picker>

ionic下拉多项选择的更多相关文章

  1. ionic 下拉选择框中默认显示传入的参数

    开发过程当中遇到一个有趣的问题,如果我在第一个页面需要把 item { "ownerId" : 1 } 传递给第二个页面,并挂在$scope下 $scope.item = $sta ...

  2. JS年月日三级联动下拉框日期选择代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. java总结:Java中获取系统时间(年、月、日)以及下拉菜单默认选择系统年、月、日的方法

    <!-- 获取系统当前的年.月.日 --> <%@ page import="java.util.*"%> <% Calendar calendar= ...

  4. Jquery下拉框左右选择

    1.说明 本文demo实现下拉框左右选择,本文地址:http://www.cnblogs.com/lengzhan/p/6423023.html 2.代码 <!DOCTYPE html PUBL ...

  5. selenium 显示等待wait.until 常用封装 及下拉框的选择操作等

    from selenium.webdriver.common.by import Byfrom selenium.webdriver.support.ui import WebDriverWait a ...

  6. jquery 下拉框左右选择

    html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...

  7. 使用 JavaScript 中的 document 对象的属性,根据下拉框中选择的属性,更改页面中的字体颜色和背景颜色

    查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 document 对象的属性,根据下拉框中选择的属性,更改页面中的字体颜色和背景颜色 实现思路: 在页面的 <body&g ...

  8. Js获取下拉框当前选择项的文本和值

    现在有一个Id为AreaId的下拉框,要获取它当前选择项的文本和值有以下方法: <span class="red">* </span> 地       区: ...

  9. jQuery插件实现select下拉框左右选择_交换内容(multiselect2side)

    效果图: 使用jQuery插件---multiselect2side做法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

随机推荐

  1. springMVC和ckeditor图片上传

    springMVC和ckeditor图片上传 http://blog.csdn.net/liuchangqing123/article/details/45270977 修正一下路径问题: packa ...

  2. Azure Event hub usage

    1. create event hub on azure watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/40 ...

  3. ios 使用第三方框架注意

    在ios中使用第三方类库        在项目开发中经常会用到一些第三方类库,通常有两种方法来做到:一种方法是直接把所有的.h和.m文件复制到项目中:另一种方法是把.xcodeproj拖到项目中生成静 ...

  4. android 线程的开启和停止(借鉴java的技术)

    在onclick()点击事件中的 // 上传地理位置 case R.id.person_up_locat: System.out.println("====输出了.. .. ====&quo ...

  5. Oracle行转列,列转行,行列相互转换

    1.行转列 SELECT WM_CONCAT(COLUMN_NAME) COLUMN_NAME FROM USER_TAB_COLUMNS WHERE TABLE_NAME = 'T_CREATE_T ...

  6. java分页之页面分页

    import java.util.ArrayList; import java.util.List; /** * * @author cheney * * @date Aug 31, 2012 */ ...

  7. python 执行shell

    一.import os ex: 1.os.system('ls') ----并不能得到返回值 2.output = os.popen('ls') res = output.read() ----能得到 ...

  8. Kubernetes——自动扩展容器!假设你突然需要增加你的应用;你只需要告诉deployment一个新的 pod 副本总数即可

    参考:http://kubernetes.kansea.com/docs/hellonode/ 现在你应该可以通过这个地址来访问这个service: http://EXTERNAL_IP:8080 或 ...

  9. Kafka VS Flume

     (1)kafka和flume都是日志系统.kafka是分布式消息中间件,自带存储,提供push和pull存取数据功能.flume分为agent(数据采集器),collector(数据简单处理和写入) ...

  10. C++ 指针 部分

    基本知识:在内存中的每个字节都有一个编号,这就是“地址”,相当于旅馆中的房间号.记住,内存单元的地址和内存单元的内容是两个不同的概念. 程序在编译之后,就已经将变量名转换成变量地址,对变量值的存取都是 ...