hsuanxyz / Ionic2 City Picker
ionic2的省市区三级联动组件
Stars: ✭ 95
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Ionic2 City Picker
angular-progress-bar
This component allow you to easy incorporate progress-bar to angular/ionic project, providing binding and color options
Stars: ✭ 26 (-72.63%)
Mutual labels: ionic, ionic2
ionic-parallax
Parallax Module for Ionic Framework 2+
Stars: ✭ 10 (-89.47%)
Mutual labels: ionic, ionic2
cordova-plugin-today-widget
Add a today widget app extension target to your cordova project.
Stars: ✭ 51 (-46.32%)
Mutual labels: ionic, ionic2
fireblogger
Ionic 2 social media microblogging platform built with firebase 3 as backend
Stars: ✭ 54 (-43.16%)
Mutual labels: ionic, ionic2
Ion2 Calendar
📅 A date picker components for ionic2 /ionic3 / ionic4
Stars: ✭ 537 (+465.26%)
Mutual labels: ionic, ionic2
todo-list
TodoList using Ionic2/3 & Firebase: * PWA * SSO Google plus. * Share list via QRcode. * Upload image from Camera or Storage. * Speech Recognition.
Stars: ✭ 18 (-81.05%)
Mutual labels: ionic, ionic2
ionic-modal-custom-transitions
Add Custom Transitions to Ionic Modals.
Stars: ✭ 22 (-76.84%)
Mutual labels: ionic, ionic2
ionicfirebaseauth
Exemplo de alguns tipos de autenticação com Ionic 2 e Firebase
Stars: ✭ 18 (-81.05%)
Mutual labels: ionic, ionic2
Ionic2 Calendar
A calendar component based on Ionic framework
Stars: ✭ 338 (+255.79%)
Mutual labels: ionic, ionic2
Ionic2 Tutorial Pouchdb
Tutorial: How To Use PouchDB + SQLite For Local Storage In Ionic 2
Stars: ✭ 56 (-41.05%)
Mutual labels: ionic, ionic2
ionic-uuchat
基于ionic3,angular4的实时聊天app,兼容web端。该项目只是前端部分,所有数据需要请求后端服务器,需要配套express-uuchat-api使用。
Stars: ✭ 14 (-85.26%)
Mutual labels: ionic, ionic2
ionic-3-video-calling-using-webrtc
This is demo code of how to implement video calling in ionic 3 using webrtc
Stars: ✭ 58 (-38.95%)
Mutual labels: ionic, ionic2
ng-ionic-connectedanim
Connected Animation (Shared Element Transition) for Ionic Framework.
Stars: ✭ 12 (-87.37%)
Mutual labels: ionic, ionic2
ionic-3D-card-carousel
DEPRECATED Sample project that shows an experimental 3D card carousel in Ionic.
Stars: ✭ 29 (-69.47%)
Mutual labels: ionic, ionic2
Ionic Boilerplate
✨ An Ionic Starter kit featuring Tests, E2E, Karma, Protractor, Jasmine, Istanbul, Gitlab CI, Automatic IPA and APK, TypeScript 2, TsLint, Codelyzer, Typedoc, Yarn, Rollup, and Webpack 2
Stars: ✭ 309 (+225.26%)
Mutual labels: ionic, ionic2
Awesome Ionic
An "awesome" list of Ionic resources
Stars: ✭ 799 (+741.05%)
Mutual labels: ionic, ionic2
ionic2-city-picker
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 下载
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 | 城市选择器被改变时触发的事件 |
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].