ionic+AnjularJs实现省市县三级联动效果

建议对ionic和AnjularJs有一定了解的人可以用到,很多时候我们要用到选择省份、城市、区县的功能,现在就跟着我来实现这个功能吧,用很少的代码(我这里是根据客户的要求,只显示想要显示的部分省份和其相对应的城市、区县,并且这些数据将通过后台放入数据库,并没有引用完整的城市js)

1.首先在所需要的HTML页面需要这些代码,其中的样式都是自己定义的,不喜欢的可以按照自己喜好来写:

<div class="list">
            <div class="list" style="border: 0;">
                <label class="item item-input item-select" style="border: 0">
                    <div class="input-label">
                        <span><span style="color: #6e6e6e"> </span></span>
                    </div>
                    <select style="font-size: 16px" ng-model="data.currentProvinceId"
                            ng-options="pp.Id as pp.RegionName for pp in allProvinces"
                            ng-change="switchProvince(data.currentProvinceId)">
                    </select>

                </label>
            </div>
            <div class="list" style="border: 0">
                <label class="item item-input item-select" style="border: 0">
                    <div class="input-label">
                        <span><span style="color: #6e6e6e"> </span></span>
                    </div>
                    <select style="font-size: 16px" ng-options="cc.Id as cc.RegionName for cc in cities"
                            ng-model="data.currentCityId" ng-change="switchCity(data.currentCityId)">
                    </select>
                </label>
            </div>
            <div class="list" style="border: 0">
                <label class="item item-input item-select" style="border: 0">
                    <div class="input-label">
                        <span style="color: #6e6e6e"> </span>
                    </div>
                    <select style="font-size: 16px" ng-options="aa.Id as aa.RegionName for aa in areas"
                            ng-model="data.currentAreaId" ng-change="switchArea(data.currentAreaId)">
                    </select>
                </label>
            </div>

        </div>

2.相应的控制器controller.js里:

.controller(‘selectCityCtrl‘, function ($rootScope, $scope, $state, $filter, $ionicHistory, selectCitySvc, storageSvc, scollImageSvc, classIficationItemSvc) {

    $scope.currentCity = selectCitySvc.getCurrentCity();

    $scope.allRegions = selectCitySvc.getCacheAllAreas();

    $scope.allProvinces = [
        {Id: 0, RegionName: ‘请选择省份‘}
    ];

    $scope.cities = [
        {Id: 0, RegionName: ‘请选择城市‘}
    ];

    $scope.areas = [
        {Id: 0, RegionName: ‘请选择区/县‘}
    ];

    $scope.data = {
        selectName: "",
        currentProvinceId: 0,
        currentCityId: 0,
        currentAreaId: 0
    };

    function getSelectedRegionId() {
        var regionId = $scope.data.currentAreaId;
        if (regionId == 0) {
            regionId = $scope.data.currentCityId;
        }
        if (regionId == 0) {
            regionId = $scope.data.currentProvinceId;
        }
        return regionId;
    }

    function updateSelectRegionName() {
        var currentRegion = $filter(‘filter‘)($scope.allRegions, {Id: getSelectedRegionId()}, true)[0];
        if (currentRegion) {
            $scope.data.selectName = currentRegion.RegionName
        } else {
            $scope.data.selectName = ‘‘;
        }
    }

    $scope.switchProvince = function (currentProvinceId) {
        $scope.data.currentCityId = 0;
        $scope.data.currentAreaId = 0;

        $scope.cities.splice(1);
        $scope.areas.splice(1);

        var cities = $filter(‘filter‘)($scope.allRegions, {RegionType: 1, ParentId: currentProvinceId});
        for (var i in cities) {
            $scope.cities.push(cities[i]);
        }

        updateSelectRegionName();
    };

    $scope.switchCity = function (currentCityId) {
        $scope.data.currentAreaId = 0;

        $scope.areas.splice(1);

        var areas = $filter(‘filter‘)($scope.allRegions, {RegionType: 2, ParentId: currentCityId});
        for (var i in areas) {
            $scope.areas.push(areas[i]);
        }

        updateSelectRegionName();
    };

    //增加当切换县区的时候更换服务区名
    $scope.switchArea = function (currentAreaId) {
        updateSelectRegionName();
    };

    var allProvinces = $filter(‘filter‘)($scope.allRegions, {RegionType: 0});
    for (var i in allProvinces) {
        $scope.allProvinces.push(allProvinces[i]);
    }

    if ($scope.currentCity.RegionType == 0) {
        // 如果上次选择省份
        $scope.data.currentProvinceId = $scope.currentCity.Id;
        $scope.switchProvince($scope.currentCity.Id);
    } else if ($scope.currentCity.RegionType == 1) {
        var province = $filter(‘filter‘)($scope.allRegions, {Id: $scope.currentCity.ParentId}, true)[0];
        $scope.data.currentProvinceId = province.Id;
        //省份
        $scope.switchProvince(province.Id);
        $scope.data.currentCityId = $scope.currentCity.Id;
        $scope.switchCity($scope.currentCity.Id);
    } else if ($scope.currentCity.RegionType == 2) {
        // 如果上次选择县区
        var city = $filter(‘filter‘)($scope.allRegions, {Id: $scope.currentCity.ParentId}, true)[0];
        var province = $filter(‘filter‘)($scope.allRegions, {Id: city.ParentId}, true)[0];

        $scope.data.currentProvinceId = province.Id;
        $scope.switchProvince(province.Id);
        $scope.data.currentCityId = city.Id;
        $scope.switchCity(city.Id);
        $scope.data.currentAreaId = $scope.currentCity.Id;
    }
    $scope.user = {
        province: "" || storageSvc.load(‘province.RegionName‘),
        city: "" || storageSvc.load(‘city.RegionName‘),
        area: "" || storageSvc.load(‘area.RegionName‘),
        currentCity: "" || storageSvc.load(‘selectCitySvc.getCurrentCity()‘)

    };

});

3.效果如图:

       

时间: 2024-10-14 18:50:01

ionic+AnjularJs实现省市县三级联动效果的相关文章

JavaScript解析XML实现省市县三级联动

JavaScript解析XML实现省市县三级联动,简单易用,只需要一个XML和一个js就能能实现,下载后代开HTML就能看到效果.  原文:JavaScript解析XML实现省市县三级联动 源代码下载地址:http://www.zuidaima.com/share/1550463310056448.htm JavaScript解析XML实现省市县三级联动

jQuery - 全国省市县三级联动

最近有空用jquery做了一个全国省市县的三级联动,在以后或许可以用的到 ,遗憾的是我还没用封装,等有空看能不能封装成一个插件 废话不多说,贴上代码: 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>下拉框</title> 6 <script src="city.js"></script

PHP开发中基于layUI的三级联动效果如何实现

后台开发常常用到layUI框架,这样才能让整个页面效果看起来美观大方,然而有时候一些原生的效果放到layUI框架上是无法使用的,比如最近遇到了省市县三级联动的select效果.不同于之前的,layUI框架里,需要重视select的lay-filter属性,来监听事件,另外需要form.render()来重新渲染,解决这两大难题,联动也就不再是难题.下面就来为大家分享下吧. 实现代码: <!DOCTYPE html><html><head><meta charset

全国最标准的、最完整的省市县三级联动选择 - 大型企业信息化系统集成快速开发平台

在使用通用权限管理系统时,需要经常使用省市县三级联动选择,在网上看到不少这类例子,感觉不是很满足我们的需求, 在使用的时候也用过通用权限系统中的省市县接口,为减少对接口的调用,现将其改为JS文件调用的方式:样式如下 JS文件截图 这个JS文件可根据基础信息中省市县资料的变更重新生成.其自动生成方法调用如下图: 省市县数据基本变化应该很小,为方便大家提供最新生成的JS文件和demo: district.js /* * UPDATE DATE:2015-01-06 22:04:16 songbiao

asp.net(c#)用Ajax调用web 服务实现省市县三级联动

1.先说说硬件配置,我最开始是在Win7(I7 4770,8G RAM,2T硬盘)里装ubuntu10.10 64位系统(4G RAM,200G 硬盘)进行源码编译,大概花了3个多小时.而且还多次出现outofmemoryerror 错误.最后将硬件升级为I7 4770.16G内存.2T硬盘,不装虚拟机,直接跑Ubuntu 10.10系统,Swap分区为16G,编译一次大概花了40分钟,没有报任何错误. 所以不推荐在虚拟机里面跑. 2.根据官方文档配置编译环境: 官方文档说的是在"发布包/Sof

Android开发之解析XML并实现三级联动效果

请尊重他人的劳动成果,转载请注明出处:Android开发之解析XML并实现三级联动效果 本实例主要应用XmlPullParser解析XML文档中的省市区,然后将数据绑定到Spinner上实现三级联动的效果.关于XmlPullParser的详解大家可以参考<Android开发之使用PULL解析和生成XML>一文. 运行效果图: 程序代码: 核心代码: <pre name="code" class="java">package com.jph.s

day01课程回顾,数据类型,(用户登录限制登录三次,购物车,省市县三级联动)

Day01 Python的分类 Cpython:代码àc字节码->机器码   一行一行的编译执行 Pypy:   代码àc字节码->机器码   全部转换完再执行 其他python  代码-->其他字节码-->机器码 Python的执行 Windows:C:\Python35\python.exe    D:\1.txt(python可执行文件路径---解释器   执行文件) Linux:可以在文件的头部写#!/usr/bin/python    python安装路径(用命令wher

android:省市县三级联动(基于json和spring)

一.请看效果图": 二.程序的代码: 1.MainActivity.java package com.loveplusplus.loader.demo.ui; import org.json.JSONArray; import org.json.JSONException; import org.json.JSONObject; import android.app.Activity; import android.os.Bundle; import android.os.Handler; im

自写日期年月日三级联动效果jquery插件

哈哈,好久没写新博文啦,原因是最近一直在研究用jquery UI实现截取头像的功能,哈哈 言归正传,有时候呢,我们会在用户资料的页面用到一个年月日日期的三级联动效果.在网上找了找,没看到有多么合适的(主要是本屌丝倾向于用jquery写成插件的形式使用,哈哈~~) 这篇博文呢,主要目的是给大家看下我用jquery写成插件的形式. 原理很简单,就是判断闰年,然后在select change事件的时候给显示日期的select重新append option (PS.不知道为啥,js有appendchil