Nukem's Possible Manifestation

    ionic2-city-picker
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.11 • Public • Published

    ionic2-city-picker

    Dependency Status NPM version Downloads MIT License

    ionic2 的省市区选择插件 灵感(抄袭😄)来自于

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

    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 城市选择器被改变时触发的事件

    Install

    npm i ionic2-city-picker

    DownloadsWeekly Downloads

    8

    Version

    0.0.11

    License

    MIT

    Last publish

    Collaborators

    • hsuanlee