Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hsuanxyz/ionic2-city-picker
ionic2的省市区三级联动组件
https://github.com/hsuanxyz/ionic2-city-picker
city ionic ionic2 ionic2-city-picker picker
Last synced: 3 months ago
JSON representation
ionic2的省市区三级联动组件
- Host: GitHub
- URL: https://github.com/hsuanxyz/ionic2-city-picker
- Owner: hsuanxyz
- Created: 2017-02-08T15:47:37.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-08-06T14:51:48.000Z (over 6 years ago)
- Last Synced: 2024-10-01T11:42:53.914Z (4 months ago)
- Topics: city, ionic, ionic2, ionic2-city-picker, picker
- Language: TypeScript
- Homepage:
- Size: 121 KB
- Stars: 95
- Watchers: 6
- Forks: 29
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ionic2-city-picker
[](https://david-dm.org/HsuanXyz/ionic2-city-picker)
[![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][downloads-url] [![MIT License][license-image]][license-url]
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
```ts
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服务
```ts
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)
})
}
}
```
视图控制器
```ts
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
}
}
```
视图
```html
选择城市
省市区选择器
地区编码： {{code}}
```
## 输入属性
| 名称 | 类型 | 默认 | 描述 |
| ------------- | ------- | ------- | ----------- |
| citiesData |CityPickerColumn | 无 | 城市数据 |
| separator |string | ' ' | 分隔符 |
| doneText |string | 'done' | 完成文字 |
| cancelText |string | 'cancel' | 取消文字 |
### CityPickerColumn
| key | 类型 | 描述 |
| --- | --- | --- |
| name | string | 名称 |
| code | string | 地区编码 |
| children | CityPickerColumn | 子级 |
## 输出事件
| 名称 | 描述 |
| ---------- | --- |
|ionChange | 城市选择器被改变时触发的事件 |
[npm-url]: https://www.npmjs.com/package/ionic2-city-picker
[npm-image]: https://img.shields.io/npm/v/ionic2-city-picker.svg
[downloads-image]: https://img.shields.io/npm/dm/ionic2-city-picker.svg
[downloads-url]: http://badge.fury.io/js/ionic2-city-picker
[license-image]: http://img.shields.io/badge/license-MIT-blue.svg?style=flat
[license-url]: LICENSE