{"id":17925135,"url":"https://github.com/hsuanxyz/ionic2-city-picker","last_synced_at":"2025-03-24T03:31:00.121Z","repository":{"id":57141717,"uuid":"81346065","full_name":"hsuanxyz/ionic2-city-picker","owner":"hsuanxyz","description":"ionic2的省市区三级联动组件","archived":false,"fork":false,"pushed_at":"2018-08-06T14:51:48.000Z","size":124,"stargazers_count":94,"open_issues_count":5,"forks_count":29,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-19T01:11:39.595Z","etag":null,"topics":["city","ionic","ionic2","ionic2-city-picker","picker"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hsuanxyz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-08T15:47:37.000Z","updated_at":"2024-12-11T12:57:16.000Z","dependencies_parsed_at":"2022-09-03T07:41:22.405Z","dependency_job_id":null,"html_url":"https://github.com/hsuanxyz/ionic2-city-picker","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsuanxyz%2Fionic2-city-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsuanxyz%2Fionic2-city-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsuanxyz%2Fionic2-city-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsuanxyz%2Fionic2-city-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hsuanxyz","download_url":"https://codeload.github.com/hsuanxyz/ionic2-city-picker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245204465,"owners_count":20577354,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["city","ionic","ionic2","ionic2-city-picker","picker"],"created_at":"2024-10-28T20:52:50.705Z","updated_at":"2025-03-24T03:30:59.800Z","avatar_url":"https://github.com/hsuanxyz.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ionic2-city-picker\n\n[![Dependency Status](https://david-dm.org/HsuanXyz/ionic2-city-picker.svg)](https://david-dm.org/HsuanXyz/ionic2-city-picker)\n[![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][downloads-url] [![MIT License][license-image]][license-url]\n\nionic2 的省市区选择插件\n灵感(抄袭😄)来自于\n\nhttps://github.com/raychenfj/ion-multi-picker\nhttps://github.com/driftyco/ionic/blob/master/src/components/datetime/datetime.ts\n\n![](https://github.com/HsuanXyz/hsuanxyz.github.io/blob/master/assets/ionic2-city-picker/%E5%9C%B0%E5%8C%BA%E9%80%89%E6%8B%A9.gif?raw=true)\n\n## Install\n`npm install ionic2-city-picker --save`\n\n## Json 下载\nhttps://raw.githubusercontent.com/HsuanXyz/hsuanxyz.github.io/master/assets/ionic2-city-picker/city-data.json.zip\n\n## Use\nimport module\n\n```ts\nimport { NgModule, ErrorHandler } from '@angular/core';\nimport { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';\nimport { MyApp } from './app.component';\n...\nimport { CityPickerModule } from  \"ionic2-city-picker\"\n\n@NgModule({\n  declarations: [\n    MyApp,\n    ...\n  ],\n  imports: [\n    CityPickerModule,\n    IonicModule.forRoot(MyApp)\n  ],\n  bootstrap: [IonicApp],\n  entryComponents: [\n    MyApp,\n    ...\n  ],\n  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]\n})\nexport class AppModule {}\n```\n获取城市数据json服务\n\n```ts\nimport { Injectable } from '@angular/core';\nimport { Http } from '@angular/http';\nimport 'rxjs/add/operator/map';\nimport 'rxjs/add/operator/toPromise';\n\n@Injectable()\nexport class CityPickerService {\n\n  constructor(public http: Http) {\n    console.log('Hello CityPicker Provider');\n  }\n\n  getCitiesData(){\n    return this.http.get('./assets/data/city-data.json')\n      .toPromise()\n      .then(response =\u003e response.json())\n      .catch( err =\u003e {\n        return Promise.reject(err)\n      })\n\n  }\n\n}\n```\n视图控制器\n\n```ts\nimport { Component } from '@angular/core';\n\nimport {NavController, NavParams} from 'ionic-angular';\nimport {CityPickerService} from \"../../providers/city-picker\";\n\n@Component({\n  selector: 'page-home',\n  templateUrl: 'home.html'\n})\nexport class HomePage {\n  cityData: any[]; //城市数据\n  cityName:string = '北京市-北京市-东城区'; //初始化城市名\n  code:string; //城市编码\n  constructor(\n    public navCtrl: NavController,\n    public cityPickerSev: CityPickerService,\n    public navParams: NavParams\n  ) {\n\n    this.setCityPickerData();\n  }\n\n  /**\n   * 获取城市数据\n   */\n  setCityPickerData(){\n    this.cityPickerSev.getCitiesData()\n      .then( data =\u003e {\n        this.cityData = data;\n      });\n  }\n\n  /**\n   * 城市选择器被改变时触发的事件\n   * @param event\n   */\n  cityChange(event){\n    console.log(event);\n    this.code = event['region'].value\n  }\n}\n\n```\n视图\n\n```html\n\u003cion-header\u003e\n  \u003cion-navbar\u003e\n    \u003cion-title\u003e选择城市\u003c/ion-title\u003e\n  \u003c/ion-navbar\u003e\n\u003c/ion-header\u003e\n\n\u003cion-content padding\u003e\n\n  \u003cion-item\u003e\n    \u003cion-label\u003e省市区选择器\u003c/ion-label\u003e\n    \u003ccity-picker item-content\n                 [cancelText]=\"'取消'\"\n                 [doneText]=\"'完成'\"\n                 [separator]=\"'-'\"\n                 [citiesData]=\"cityData\"\n                 [(ngModel)]=\"cityName\"\n                 (ionChange)=\"cityChange($event)\"\u003e\n\n    \u003c/city-picker\u003e\n  \u003c/ion-item\u003e\n  \u003cp\u003e地区编码：  {{code}}\n  \u003c/p\u003e\n\n\u003c/ion-content\u003e\n\n```\n## 输入属性\n| 名称          |  类型 | 默认   | 描述 |\n| ------------- | ------- | ------- | ----------- |\n| citiesData     |CityPickerColumn     | 无  | 城市数据   |\n| separator     |string     | ' '  | 分隔符   |\n| doneText     |string     |  'done'  | 完成文字   |\n| cancelText     |string     |  'cancel'  | 取消文字   |\n\n### CityPickerColumn\n| key | 类型 | 描述 |\n| --- | --- | --- |\n| name | string | 名称 |\n| code | string | 地区编码 |\n| children | CityPickerColumn | 子级 |\n\n## 输出事件\n| 名称       | 描述 |\n| ---------- | --- |\n|ionChange | 城市选择器被改变时触发的事件 |\n\n[npm-url]: https://www.npmjs.com/package/ionic2-city-picker\n[npm-image]: https://img.shields.io/npm/v/ionic2-city-picker.svg\n\n[downloads-image]: https://img.shields.io/npm/dm/ionic2-city-picker.svg\n[downloads-url]: http://badge.fury.io/js/ionic2-city-picker\n\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg?style=flat\n[license-url]: LICENSE\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhsuanxyz%2Fionic2-city-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhsuanxyz%2Fionic2-city-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhsuanxyz%2Fionic2-city-picker/lists"}