ionic2-city-picker

[图片上传失败...(image-bd0893-1526546372116)] [图片上传中...(image-c7f557-1526546372116-3)] [图片上传中...(image-ec1191-1526546372116-2)] [图片上传中...(image-cea26-1526546372116-1)]

ionic2 的省市区选择插件 灵感(抄袭<g-emoji class="g-emoji" alias="smile" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f604.png" style="box-sizing: border-box; font-family: "Apple Color Emoji", "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 18px; font-weight: 400; line-height: 20px; vertical-align: middle;">😄</g-emoji>)来自于

https://github.com/raychenfj/ion-multi-pickerhttps://github.com/driftyco/ionic/blob/master/src/components/datetime/datetime.ts

[图片上传失败...(image-800245-1526546372116)]

Install

npm install ionic2-city-picker --save

Json 下载

https://raw.githubusercontent.com/HsuanXyz/hsuanxyz.github.io/master/assets/ionic2-city-picker/city-data.json.zip

Use

import module

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
...
import { CityPickerModule } from  "ionic2-city-picker"

@NgModule({
  declarations: [
    MyApp,
    ...
  ],
  imports: [
    CityPickerModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    ...
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}

获取城市数据json服务

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';

@Injectable()
export class CityPickerService {

  constructor(public http: Http) {
    console.log('Hello CityPicker Provider');
  }

  getCitiesData(){
    return this.http.get('./assets/data/city-data.json')
      .toPromise()
      .then(response => response.json())
      .catch( err => {
        return Promise.reject(err)
      })

  }

}

视图控制器

import { Component } from '@angular/core';

import {NavController, NavParams} from 'ionic-angular';
import {CityPickerService} from "../../providers/city-picker";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  cityData: any[]; //城市数据
  cityName:string = '北京市-北京市-东城区'; //初始化城市名
  code:string; //城市编码
  constructor(
    public navCtrl: NavController,
    public cityPickerSev: CityPickerService,
    public navParams: NavParams
  ) {

    this.setCityPickerData();
  }

  /**
   * 获取城市数据
   */
  setCityPickerData(){
    this.cityPickerSev.getCitiesData()
      .then( data => {
        this.cityData = data;
      });
  }

  /**
   * 城市选择器被改变时触发的事件
   * @param event
   */
  cityChange(event){
    console.log(event);
    this.code = event['region'].value
  }
}

视图

<ion-header>
  <ion-navbar>
    <ion-title>选择城市</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <ion-item>
    <ion-label>省市区选择器</ion-label>
    <city-picker item-content
                 [cancelText]="'取消'"
                 [doneText]="'完成'"
                 [separator]="'-'"
                 [citiesData]="cityData"
                 [(ngModel)]="cityName"
                 (ionChange)="cityChange($event)">

    </city-picker>
  </ion-item>
  <p>地区编码：  {{code}}
  </p>

</ion-content>

输入属性

名称	类型	默认	描述
citiesData	CityPickerColumn	无	城市数据
separator	string	' '	分隔符
doneText	string	'done'	完成文字
cancelText	string	'cancel'	取消文字

CityPickerColumn

key	类型	描述
name	string	名称
code	string	地区编码
children	CityPickerColumn	子级

输出事件

名称	描述
ionChange	城市选择器被改变时触发的事件