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. 迭代器概念与traits编程技法

    //迭代器是一种smart pointer template<typename T> class ListItem { public: T value() const { return _ ...

  2. 小议C#错误调试和异常处理

    在程序设计中不可避免地会出现各种各样的错误,在编写代码时须要尽量避免. 在处理错误时,首先应该分析错 误的类型,找出出错的原因才干解决错误. 错误的分类 watermark/2/text/aHR0cD ...

  3. [Vue-rx] Watch Vue.js v-models as Observable with $watchAsObservable and RxJS

    You most likely already have data or properties in your template which are controlled by third-party ...

  4. Android:使用SparseArray取代HashMap优化性能

    之前看到一篇关于adapter的文章用到了SparseArray,所以在这里写写关于SparseArray的使用方法. SparseArray是官方针对安卓所写的容器,与HashMap类似,只是性能比 ...

  5. http://www.html5tricks.com/demo/jiaoben2255/index.html 排序算法jquery演示源代码

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

  6. jq 地区(省市县区)联动菜单

    <pre name="code" class="html"><pre name="code" class="ph ...

  7. java线程和线程池的使用

    java线程和线程池 一.创建多线程的方式 java多线程非经常见.怎样使用多线程,怎样创建线程.java中有两种方式,第一种是让自己的类实现Runnable接口.另外一种是让自己的类继承Thread ...

  8. 递归,迭代,堆栈三种方式实现单链表反转(C++)

    #author by changingivan# 2016.04.12#include <iostream> #include <stack> using namespace ...

  9. ansible安装测试

    安装: # yum install ansible # yum install sshpass 配置: # vi /etc/ansible/hosts  [mysqldb] 172.16.100.23 ...

  10. 【bzoj1082】栅栏[SCOI2005]

    显然我们取的肯定是前ans块木板.然后砍的木材也应该是从小到大砍(如果小的木材可以满足条件,就一定不会去动大的木材) 所以两遍排序. 二分答案. 然后对于要取的每块木板,我们搜索它是在第x块木板上砍下 ...