利用Ionic2 + angular4实现一个地区选择组件

前言

本文主要给大家介绍的是关于利用Ionic2 + angular4实现一个地区选择组件的相关内容,为什么会有这篇文章?主要是因为最近在项目重构的过程中,发现之前用mobiscroll写的地区选择指令在angular2中很难重用(毕竟是用typeScript)。于是就萌生了自己写一个组件的想法。

想和之前一样基于mobiscroll去写,但是发现非常耗费精力,于是某日万般无奈这下搜了一下相关的组件,不出所料已经有人写了。https://www.npmjs.com/package...但是此组件并不符合我的要求。我不是单纯的选择省市区,还可能是选择省市或者省。于是参照此项目基于ionic2的picker写了一个公用组件。下面话不多说了,感兴趣的朋友们下面来一起看看详细的介绍:

具体代码如下:

AreasSelect.ts

import {PickerController} from "ionic-angular";
import {Component, EventEmitter, Output, Input} from "@angular/core";
import {areasList} from "../../datasource/areas";

@Component({
 selector: 'areas-select',
 templateUrl: 'areasSelect.com.html',
})
export class AreasSelect {
 constructor(protected Picker: PickerController) {
 }
 private picker;
 private provinceCol = 0; // 省列
 private cityCol = 0; // 市列
 private regionCol = 0; // 区列
 private pickerColumnCmps; // picker纵列数据实例
 private isOpen = false; // 是否被创建
 private pickerCmp; // picker 实例
 private value = ''; // 选中后的数据
 @Input() citiesData = areasList; // 地区数据(默认为areas.ts的数据)
 @Input() cancelText = '关闭'; // 关闭按钮文本
 @Input() doneText = '完成'; // 完成按钮文本
 @Input() separator = ''; // 数据衔接模式
 @Input() level = 3; // 等级设置 最高为三级
 /**
 * 关闭时触发的事件
 * 没有值返回
 * @type {EventEmitter}
 */
 @Output() cancel: EventEmitter<any> = new EventEmitter(); // 关闭事件
 /**
 * 完成时触发的事件
 * 返回值为obj
 * obj = {data: object,value: string} data为对应的省市区和编码
 * @type {EventEmitter}
 */
 @Output() done: EventEmitter<any> = new EventEmitter(); // 完成事件
 /**
 * 打开地区选择器
 * 基本思路
 * 1.创建picker
 * 2. 先把数据处理成省市区分开的数组
 * 3. 将数据以列的形式给到picker
 * 4. 设置数据显示样式(picker)
 * 5. 生成picker
 */
 private open() {
 let pickerOptions = {
 buttons: [
 {
 text: this.cancelText,
 role: 'cancel',
 handler:() => {
 this.cancel.emit(null);
 }
 },
 {
 text: this.doneText,
 handler: (data) =>{
 this.onChange(data);
 this.done.emit({
 data: data,
 value: this.value
 });
 }
 }
 ]
 };
 this.picker = this.Picker.create(pickerOptions);
 this.generate();// 加载
 this.validate(this.picker); // 渲染
 this.picker.ionChange.subscribe(() => {
 this.validate(this.picker);
 });
 // 生成
 this.picker.present(pickerOptions).then(() => {
 this.pickerCmp = this.picker.instance;
 this.pickerColumnCmps = this.pickerCmp._cols.toArray();
 this.pickerColumnCmps.forEach(function (col) {
 return col.lastIndex = -1;
 });
 });
 this.isOpen = true;
 this.picker.onDidDismiss(function () {
 this.isOpen = false;
 });
 }

 /** 对数据进行处理,并移交给picker
 *
 */
 private generate() {
 let values = this.value.toString().split(this.separator);
 // Add province data to picker
 let provinceCol = {
 name: 'province',
 options: this.citiesData.map(function (province) {
 return {text: province.name, value: province.code, disabled: false};
 }),
 selectedIndex: 0
 };
 let provinceIndex = this.citiesData.findIndex(function (option) {
 return option.name == values[0];
 });
 provinceIndex = provinceIndex === -1 ? 0 : provinceIndex;
 provinceCol.selectedIndex = provinceIndex;
 this.picker.addColumn(provinceCol);
 // Add city data to picker
 let cityColData = this.citiesData[provinceCol.selectedIndex].children;
 let cityCol;

 if (this.level >= 2) {
 cityCol = {
 name: 'city',
 options: cityColData.map(function (city) {
 return {text: city.name, value: city.code, disabled: false};
 }),
 selectedIndex: 0
 };
 let cityIndex = cityColData.findIndex(function (option) {
 return option.name == values[1];
 });
 cityIndex = cityIndex === -1 ? 0 : cityIndex;
 cityCol.selectedIndex = cityIndex;
 this.picker.addColumn(cityCol);
 }
 // Add region data to picker
 let regionData, regionCol;

 if (this.level === 3) {
 regionData = this.citiesData[provinceCol.selectedIndex].children[cityCol.selectedIndex].children;
 regionCol = {
 name: 'region',
 options: regionData.map(function (city) {
 return {text: city.name, value: city.code, disabled: false};
 }),
 selectedIndex: 0
 };
 let regionIndex = regionData.findIndex(function (option) {
 return option.name == values[2];
 });
 regionIndex = regionIndex === -1 ? 0 : regionIndex;
 regionCol.selectedIndex = regionIndex;
 this.picker.addColumn(regionCol);
 }
 this.divyColumns(this.picker);
 }

 /**设置数据显示样式
 * @param picker
 */
 private divyColumns(picker) {
 let pickerColumns = this.picker.getColumns(); // 获取列数据
 let columns = [];
 pickerColumns.forEach(function (col, i) {
 columns.push(0);
 col.options.forEach(function (opt) {
 if (opt && opt.text && opt.text.length > columns[i]) {
 columns[i] = opt.text.length;
 }
 });
 });
 if (columns.length === 2) {
 let width = Math.max(columns[0], columns[1]);
 pickerColumns[0].align = 'right';
 pickerColumns[1].align = 'left';
 pickerColumns[0].optionsWidth = pickerColumns[1].optionsWidth = width * 17 + "px";
 }
 else if (columns.length === 3) {
 let width = Math.max(columns[0], columns[2]);
 pickerColumns[0].align = 'right';
 pickerColumns[1].columnWidth = columns[1] * 33 + "px";
 pickerColumns[0].optionsWidth = pickerColumns[2].optionsWidth = width * 17 + "px";
 pickerColumns[2].align = 'left';
 }
 }

 /**
 * 验证数据
 * @param picker
 */
 private validate(picker) {
 let _this = this;
 let columns = picker.getColumns();
 let provinceCol = columns[0];
 let cityCol = columns[1];
 let regionCol = columns[2];
 if (cityCol && this.provinceCol != provinceCol.selectedIndex) {
 cityCol.selectedIndex = 0;
 let cityColData = this.citiesData[provinceCol.selectedIndex].children;
 cityCol.options = cityColData.map(function (city) {
 return {text: city.name, value: city.code, disabled: false};
 });
 if (this.pickerColumnCmps && cityCol.options.length > 0) {
 setTimeout(function () {
 return _this.pickerColumnCmps[1].setSelected(0, 100);
 }, 0);
 }
 }
 if (regionCol && (this.cityCol != cityCol.selectedIndex || this.provinceCol != provinceCol.selectedIndex)) {
 let regionData = this.citiesData[provinceCol.selectedIndex].children[cityCol.selectedIndex].children;
 regionCol.selectedIndex = 0;
 regionCol.options = regionData.map(function (city) {
 return {text: city.name, value: city.code, disabled: false};
 });
 if (this.pickerColumnCmps && regionCol.options.length > 0) {
 setTimeout(function () {
 return _this.pickerColumnCmps[2].setSelected(0, 100);
 }, 0);
 }
 }
 this.provinceCol = provinceCol.selectedIndex;
 this.cityCol = cityCol ? cityCol.selectedIndex : 0;
 this.regionCol = regionCol ? regionCol.selectedIndex : 0;
 }

 /**
 * 设置value
 * @param newData
 */
 private setValue(newData) {
 if (newData === null || newData === undefined) {
 this.value = '';
 }
 else {
 this.value = newData;
 }
 }

 /**
 * 获取value值
 * @returns {string}
 */
 private getValue() {
 return this.value;
 }

 /**
 * 改变value值的显示
 * @param val
 */
 private onChange(val) {
 this.setValue(this.getString(val));
 }

 /**
 * 获取当前选择的地区数据
 * @param newData
 * @returns {string}
 */
 private getString(newData) {
 if (newData['city']) {
 if (newData['region']) {
 return "" + newData['province'].text + this.separator + (newData['city'].text || '') + this.separator + (newData['region'].text || '');
 }
 return "" + newData['province'].text + this.separator + (newData['city'].text || '');
 }
 return "" + newData['province'].text;
 }
}

areasSelect.com.html

其实是不需要对应的template的,但是为了能和父级传参,这里创建了一个空的template

<div></div>

具体用法:

在需要用到的页面调用

test.page.html

<ion-content>
 <button ion-button block icon-left color="light" (tap)="showAreasSelect()">地区选择</button>
</ion-content>
<areas-select #areasSelect [level]="3" (cancel)="closeSelect()" (done)="done($event)"></areas-select>

test.page.ts

import {Component, ElementRef, Injector, ViewChild} from "@angular/core";
import {BasePage} from "../base.page";

@Component({
 templateUrl: 'test.page.html',
 styles: []
})
export class TestPage extends BasePage {
 constructor(protected rt: ElementRef, protected ij: Injector) {
 super(rt, ij);
 }
 @ViewChild('areasSelect') areasSelect;
 showAreasSelect() {
 this.areasSelect.open();
 }
 done(data) {
 this.showAlert(JSON.stringify(data));
 }
 closeSelect() {
 this.showAlert('you click close');
 }
}

没有地区数据json或ts的文件可以去这里获取:http://xiazai.jb51.net/201707/yuanma/regional_data(jb51.net).rar

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对我们的支持。

时间: 2017-07-24

angular+ionic返回上一页并刷新页面

假定当前页面为editCata页面,要返回的是cataDetail页面.目前我找到两种方法实现返回上一页并刷新,如果以后有其它方法,再继续添加. 1.在editCataCtrl.js中注入$ionicHistory服务. 使用$ionicHistory.goBack()方法即可返回到上一页面. JS端代码: $scope.goBack=function(){ $ionicHistory.goBack(); } HTML代码: <button class="button button-cle

ionic+AngularJs实现获取验证码倒计时按钮

按钮功能为:点击"获取验证码"--按钮不可用-设置倒计时-60秒后重新获取. 主要实现原理:点击后,设置一个$interval,每一秒更改一次剩余时间,并依赖Angular数据绑定实时显示在页面中.设置一个$timeout,60秒后将按钮初始化到可用状态. 实现代码: (1)js代码,设置成一个directive以便多次调用. angular.module('winwin').directive('timerbutton', function($timeout, $interval){

Ionic+AngularJS实现登录和注册带验证功能

登录: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <li

解决ionic和angular上拉加载的问题

说到ionic上拉加载就跟pc的分页是一样的,他需要在html数据列表的最下面边添加 <ion-infinite-scroll ng-if="hasmore" on-infinite="loadMore()" distance="10%"> </ion-infinite-scroll> 当列表为空 当ng-if为true的时候, 列表没有被填充满的时候 ,他就会自动加载loadMore(): <span style=

angular+ionic 的app上拉加载更新数据实现方法

第一步,首先需要在<ion-content>标签里面加入标签<ion-infinite-scroll ng-if="hasmore" on-infinite="loadMore()" distance="5%"></ion-infinite-scroll> 里面的属性解释, ng-if  值 布尔型,如果为true,则可以触发上拉事件 on-infinite 上拉时触发的事件 distance 列表底部滚动到可

Ionic + Angular.js实现验证码倒计时功能的方法

前言 之前跟大家分享了关于 Android 原生实现验证码倒计时,地址是这里,现在公司使用 Ionic 开发的 App 也要实现类似的功能,现在也记录下来,供大家参考: 效果图: 正文 首先介绍下与本文相关的概念 $interval $interval 是 window.setInterval 的 Angular 包装形式,函数如果在没有被取消的时候会无限执行.(取消使用 cancel(promise) ) 用法: $interval(fn,delay,[count],[invokeApply]

Ionic + Angular.js实现图片轮播的方法示例

本文主要给大家介绍了关于Ionic + Angular实现图片轮播的相关资料,分享出来供大家参考学习,需要的朋友们下面来一起看看吧. 先来看看实现的效果图: 方法示例: template文件夹新建slider.html <ion-view view-title="图片轮播"> <ion-content class="padding" scroll="false"> <ion-slides class="sl

AngularJS之ionic 框架下实现 Localstorage本地存储

前言: 我们前台用的是ionic+AngularJS,做的是混合模式移动应用.最近有一个需求是,我在页面A上面滑动的时候,跳入页面B,页面B需要加载页面A的数据,这样的页面传值如何实现呢?那就需要用到LocalStorage本地存储了. Ionic Ionic是目前最有潜力的一款HTML5手机应用开发框架.通过SASS构架应用程序,他提供了很多UI控件来帮助开发者开发强大的应用.加上angularjs可以让ionic应用体验度增强.代码也非常简单.angularjs可以提供数据的双向绑定,使用它

对angularjs框架下controller间的传值方法详解

AngularJS中的controller是个函数,用来向视图的作用域($scope)添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为. 当我们在创建新的控制器时,angularJS会帮我们生成并传递一个新的$scope对象给这个controller,在angularJS应用的中的任何一个部分,都有父级作用域的存在,顶级就是ng-app所在的层级,它的父级作用域就是$rootScope. 每个$scope的$root指向$rootScope, $cope.$parent指向父

jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法

前言:cookie,localStorage和sessionStorage都是浏览器本地存储数据的地方,其用法不尽相同:总结一下基本的用法. 一.cookie 定义: 存储在本地,容量最大4k,在同源的http请求时携带传递,损耗带宽: 可设置访问路径,只有此路径及此路径的子路径才能访问此cookie,存在有效的时间. 注意点: cookie的访问需要服务器环境,直接在本地文件访问无效: cookie的访问和设置需要导入jquery.cookie.js文件: 浏览器对每一个访问的地址下可添加的c

AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法

本文实例讲述了AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法.分享给大家供大家参考,具体如下: 1.分页加载数据的基础上,如何通过滚动加载,实现分页加载数据的效果,github上,针对AngularJS,有一款不错的插件,地址为:https://github.com/sroze/ngInfiniteScroll 2.下面来看官方给出的文档 (1)使用样例: <ANY infinite-scroll='{expression}' [infinite-scroll-di

AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】

本文实例讲述了AngularJS验证信息框架的封装插件用法.分享给大家供大家参考,具体如下: AngularJS 的表单验证规则 angular.js 的表单验证规则有 required(必填项),type="number"(必须为数字),type="email"(必须为邮箱地址),ng-max(最大值),ng-min(最小值),ng-max-length(最大长度),ng-min-length(最小长度),ng-pattern(正则验证)等等,而且angular写

JS实现本地存储信息的方法(基于localStorage与userData)

本文实例讲述了JS实现本地存储信息的方法.分享给大家供大家参考,具体如下: WEB应用的快速发展,是的本地存储一些数据也成为一种重要的需求,实现的方案也有很多,最普通的就是cookie了,大家也经常都用,但是cookie的缺点是显而易见的,其他的方案比如:IE6以上的userData,Firefox下面的globalStorage,以及Flash的本地存储,除了Flash之外,其他的几个都有一些兼容性的问题. sessionStorage与localStorage Web Storage实际上由

基于bootstrap写的一点localStorage本地储存

先给大家说下什么是localstorage 前几天在老项目中发现有对cookie的操作觉得很奇怪,咨询下来是要缓存一些信息,以避免在URL上面传递参数,但没有考虑过cookie会带来什么问题: ① cookie大小限制在4k左右,不适合存业务数据 ② cookie每次随HTTP事务一起发送,浪费带宽 我们是做移动项目的,所以这里真实适合使用的技术是localstorage,localstorage可以说是对cookie的优化,使用它可以方便在客户端存储数据,并且不会随着HTTP传输,但也不是没有

详解SSM框架下结合log4j、slf4j打印日志

本文主要介绍了详解SSM框架下结合log4j.slf4j打印日志,分享给大家,具体如下: 首先加入log4j和slf4j的jar包 <!-- 日志处理 <!-- slf4j日志包--> <dependency> <groupId>org.slf4j</groupId> <artifactId>slf4j-api</artifactId> <version>1.7.21</version> </dep

angularJs中json数据转换与本地存储的实例

1.html:把json对象转换成json字符串 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="angular.min.js"></script> </head> <body> <div ng-app="module" n

JS+HTML5本地存储Localstorage实现注册登录及验证功能示例

本文实例讲述了JS+HTML5本地存储Localstorage实现注册登录及验证功能.分享给大家供大家参考,具体如下: 源码引用的js.jquery都是在线的,代码拷到本地就能运行 登录: <html ng-app="ionicApp"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, m