ionic开发移动app过程中地址选择部分涉及省市县三级联动
2016-12-29 15:00
411 查看
<!DOCTYPE html> <html ng-app="app"> <head> <meta charset="utf-8"> <title>copyright by leiflyy--leiflyy@outlook.com--</title> <script src="js/ionic.bundle.js"></script> </head> <body> <div ng-controller="demo"> <div> <select id="province" ng-model="pro" ng-options="pros.name for pros in provinces" ng-change="proToCity()"> <option value="">请选择</option> </select> <select ng-model="city" ng-options="cit.name for cit in cities" ng-change="cityToArea()"></select> <select ng-model="area" ng-options="are for are in areas"></select> </div> </div> <script> var app = angular.module('app', ['ionic']); app.controller('demo', function($scope) { $scope.cities; $scope.areas; $scope.proToCity = function() { console.log($scope.pro); $scope.cities=$scope.pro.cityList; } $scope.cityToArea=function(){ console.log($scope.city) $scope.areas=$scope.city.areaList; } $scope.provinces = [{ name: '北京', cityList: [{ name: '市辖区', areaList: ['东城区', '西城区', '崇文区', '宣武区', '朝阳区', '丰台区', '石景山区', '海淀区', '门头沟区', '房山区', '通州区', '顺义区' 4000 , '昌平区', '大兴区', '怀柔区', '平谷区'] }, { name: '县', areaList: ['密云县', '延庆县'] }] }, { name: '上海', cityList: [{ name: '市辖区', areaList: ['黄浦区', '卢湾区', '徐汇区', '长宁区', '静安区', '普陀区', '闸北区', '虹口区', '杨浦区', '闵行区', '宝山区', '嘉定区', '浦东新区', '金山区', '松江区', '青浦区', '南汇区', '奉贤区'] }, { name: '县', areaList: ['崇明县'] }] }, { name: '天津', cityList: [{ name: '市辖区', areaList: ['和平区', '河东区', '河西区', '南开区', '河北区', '红桥区', '塘沽区', '汉沽区', '大港区', '东丽区', '西青区', '津南区', '北辰区', '武清区', '宝坻区'] }, { name: '县', areaList: ['宁河县', '静海县', '蓟 县'] }] }, { name: '重庆', cityList: [{ name: '市辖区', areaList: ['万州区', '涪陵区', '渝中区', '大渡口区', '江北区', '沙坪坝区', '九龙坡区', '南岸区', '北碚区', '万盛区', '双桥区', '渝北区', '巴南区', '黔江区', '长寿区'] }, { name: '县', areaList: ['綦江县', '潼南县', '铜梁县', '大足县', '荣昌县', '璧山县', '梁平县', '城口县', '丰都县', '垫江县', '武隆县', '忠 县', '开 县', '云阳县', '奉节县', '巫山县', '巫溪县', '石柱土家族自治县', '秀山土家族苗族自治县', '酉阳土家族苗族自治县', '彭水苗族土家族自治县'] }, { name: '市', areaList: ['江津市', '合川市', '永川市', '南川市'] }] }, { name: '四川', cityList: [{ name: '成都市', areaList: ['市辖区', '锦江区', '青羊区', '金牛区', '武侯区', '成华区', '龙泉驿区', '青白江区', '新都区', '温江县', '金堂县', '双流县', '郫 县', '大邑县', '蒲江县', '新津县', '都江堰市', '彭州市', '邛崃市', '崇州市'] }, { name: '自贡市', areaList: ['市辖区', '自流井区', '贡井区', '大安区', '沿滩区', '荣 县', '富顺县'] }, { name: '攀枝花市', areaList: ['市辖区', '东 区', '西 区', '仁和区', '米易县', '盐边县'] }, { name: '泸州市', areaList: ['市辖区', '江阳区', '纳溪区', '龙马潭区', '泸 县', '合江县', '叙永县', '古蔺县'] }, { name: '德阳市', areaList: ['市辖区', '旌阳区', '中江县', '罗江县', '广汉市', '什邡市', '绵竹市'] }, { name: '绵阳市', areaList: ['市辖区', '涪城区', '游仙区', '三台县', '盐亭县', '安 县', '梓潼县', '北川羌族自治县', '平武县', '江油市'] }, { name: '广元市', areaList: ['市辖区', '市中区', '元坝区', '朝天区', '旺苍县', '青川县', '剑阁县', '苍溪县'] }, { name: '遂宁市', areaList: ['市辖区', '船山区', '安居区', '蓬溪县', '射洪县', '大英县'] }, { name: '内江市', areaList: ['市辖区', '市中区', '东兴区', '威远县', '资中县', '隆昌县'] }, { name: '乐山市', areaList: ['市辖区', '市中区', '沙湾区', '五通桥区', '金口河区', '犍为县', '井研县', '夹江县', '沐川县', '峨边彝族自治县', '马边彝族自治县', '峨眉山市'] }, { name: '南充市', areaList: ['市辖区', '顺庆区', '高坪区', '嘉陵区', '南部县', '营山县', '蓬安县', '仪陇县', '西充县', '阆中市'] }, { name: '眉山市', areaList: ['市辖区', '东坡区', '仁寿县', '彭山县', '洪雅县', '丹棱县', '青神县'] }, { name: '宜宾市', areaList: ['市辖区', '翠屏区', '宜宾县', '南溪县', '江安县', '长宁县', '高 县', '珙 县', '筠连县', '兴文县', '屏山县'] }, { name: '广安市', areaList: ['市辖区', '广安区', '岳池县', '武胜县', '邻水县', '华莹市'] }, { name: '达州市', areaList: ['市辖区', '通川区', '达 县', '宣汉县', '开江县', '大竹县', '渠 县', '万源市'] }, { name: '雅安市', areaList: ['市辖区', '雨城区', '名山县', '荥经县', '汉源县', '石棉县', '天全县', '芦山县', '宝兴县'] }, { name: '巴中市', areaList: ['市辖区', '巴州区', '通江县', '南江县', '平昌县'] }, { name: '资阳市', areaList: ['市辖区', '雁江区', '安岳县', '乐至县', '简阳市'] }, { name: '阿坝藏族羌族自治州', areaList: ['汶川县', '理 县', '茂 县', '松潘县', '九寨沟县', '金川县', '小金县', '黑水县', '马尔康县', '壤塘县', '阿坝县', '若尔盖县', '红原县'] }, { name: '甘孜藏族自治州', areaList: ['康定县', '泸定县', '丹巴县', '九龙县', '雅江县', '道孚县', '炉霍县', '甘孜县', '新龙县', '德格县', '白玉县', '石渠县', '色达县', '理塘县', '巴塘县', '乡城县', '稻城县', '得荣县'] }, { name: '凉山彝族自治州', areaList: ['西昌市', '木里藏族自治县', '盐源县', '德昌县', '会理县', '会东县', '宁南县', '普格县', '布拖县', '金阳县', '昭觉县', '喜德县', ' 12f37 冕宁县', '越西县', '甘洛县', '美姑县', '雷波县'] }] }, { name: '贵州', cityList: [{ name: '贵阳市', areaList: ['市辖区', '南明区', '云岩区', '花溪区', '乌当区', '白云区', '小河区', '开阳县', '息烽县', '修文县', '清镇市'] }, { name: '六盘水市', areaList: ['钟山区', '六枝特区', '水城县', '盘 县'] }, { name: '遵义市', areaList: ['市辖区', '红花岗区', '汇川区', '遵义县', '桐梓县', '绥阳县', '正安县', '道真仡佬族苗族自治县', '务川仡佬族苗族自治县', '凤冈县', '湄潭县', '余庆县', '习水县', '赤水市', '仁怀市'] }, { name: '安顺市', areaList: ['市辖区', '西秀区', '平坝县', '普定县', '镇宁布依族苗族自治县', '关岭布依族苗族自治县', '紫云苗族布依族自治县'] }, { name: '铜仁地区', areaList: ['铜仁市', '江口县', '玉屏侗族自治县', '石阡县', '思南县', '印江土家族苗族自治县', '德江县', '沿河土家族自治县', '松桃苗族自治县', '万山特区'] }, { name: '黔西南布依族苗族自治州', areaList: ['兴义市', '兴仁县', '普安县', '晴隆县', '贞丰县', '望谟县', '册亨县', '安龙县'] }, { name: '毕节地区', areaList: ['毕节市', '大方县', '黔西县', '金沙县', '织金县', '纳雍县', '威宁彝族回族苗族自治县', '赫章县'] }, { name: '黔东南苗族侗族自治州', areaList: ['凯里市', '黄平县', '施秉县', '三穗县', '镇远县', '岑巩县', '天柱县', '锦屏县', '剑河县', '台江县', '黎平县', '榕江县', '从江县', '雷山县', '麻江县', '丹寨县'] }, { name: '黔南布依族苗族自治州', areaList: ['都匀市', '福泉市', '荔波县', '贵定县', '瓮安县', '独山县', '平塘县', '罗甸县', '长顺县', '龙里县', '惠水县', '三都水族自治县'] }] }, { name: '云南', cityList: [{ name: '昆明市', areaList: ['市辖区', '五华区', '盘龙区', '官渡区', '西山区', '东川区', '呈贡县', '晋宁县', '富民县', '宜良县', '石林彝族自治县', '嵩明县', '禄劝彝族苗族自治县', '寻甸回族彝族自治县', '安宁市'] }, { name: '曲靖市', areaList: ['市辖区', '麒麟区', '马龙县', '陆良县', '师宗县', '罗平县', '富源县', '会泽县', '沾益县', '宣威市'] }, { name: '玉溪市', areaList: ['市辖区', '红塔区', '江川县', '澄江县', '通海县', '华宁县', '易门县', '峨山彝族自治县', '新平彝族傣族自治县', '元江哈尼族彝族傣族自治县'] }, { name: '保山市', areaList: ['市辖区', '隆阳区', '施甸县', '腾冲县', '龙陵县', '昌宁县'] }, { name: '昭通市', areaList: ['市辖区', '昭阳区', '鲁甸县', '巧家县', '盐津县', '大关县', '永善县', '绥江县', '镇雄县', '彝良县', '威信县', '水富县'] }, { name: '丽江市', areaList: ['市辖区', '古城区', '玉龙纳西族自治县', '永胜县', '华坪县', '宁蒗彝族自治县'] }, { name: '思茅市', areaList: ['市辖区', '翠云区', '普洱哈尼族彝族自治县', '墨江哈尼族自治县', '景东彝族自治县', '景谷傣族彝族自治县', '镇沅彝族哈尼族拉祜族自治县', '江城哈尼族彝族自治县', '孟连傣族拉祜族佤族自治县', '澜沧拉祜族自治县', '西盟佤族自治县'] }, { name: '临沧市', areaList: ['市辖区', '临翔区', '凤庆县', '云 县', '永德县', '镇康县', '双江拉祜族佤族布朗族傣族自治县', '耿马傣族佤族自治县', '沧源佤族自治县'] }, { name: '楚雄彝族自治州', areaList: ['楚雄市', '双柏县', '牟定县', '南华县', '姚安县', '大姚县', '永仁县', '元谋县', '武定县', '禄丰县'] }, { name: '红河哈尼族彝族自治州', areaList: ['个旧市', '开远市', '蒙自县', '屏边苗族自治县', '建水县', '石屏县', '弥勒县', '泸西县', '元阳县', '红河县', '金平苗族瑶族傣族自治县', '绿春县', '河口瑶族自治县'] }, { name: '文山壮族苗族自治州', areaList: ['文山县', '砚山县', '西畴县', '麻栗坡县', '马关县', '丘北县', '广南县', '富宁县'] }, { name: '西双版纳傣族自治州', areaList: ['景洪市', '勐海县', '勐腊县'] }, { name: '大理白族自治州', areaList: ['大理市', '漾濞彝族自治县', '祥云县', '宾川县', '弥渡县', '南涧彝族自治县', '巍山彝族回族自治县', '永平县', '云龙县', '洱源县', '剑川县', '鹤庆县'] }, { name: '德宏傣族景颇族自治州', areaList: ['瑞丽市', '潞西市', '梁河县', '盈江县', '陇川县'] }, { name: '怒江傈僳族自治州', areaList: ['泸水县', '福贡县', '贡山独龙族怒族自治县', '兰坪白族普米族自治县'] }, { name: '迪庆藏族自治州', areaList: ['香格里拉县', '德钦县', '维西傈僳族自治县'] }] }, { name: '西藏', cityList: [{ name: '拉萨市', areaList: ['市辖区', '城关区', '林周县', '当雄县', '尼木县', '曲水县', '堆龙德庆县', '达孜县', '墨竹工卡县'] }, { name: '昌都地区', areaList: ['昌都县', '江达县', '贡觉县', '类乌齐县', '丁青县', '察雅县', '八宿县', '左贡县', '芒康县', '洛隆县', '边坝县'] }, { name: '山南地区', areaList: ['乃东县', '扎囊县', '贡嘎县', '桑日县', '琼结县', '曲松县', '措美县', '洛扎县', '加查县', '隆子县', '错那县', '浪卡子县'] }, { name: '日喀则地区', areaList: ['日喀则市', '南木林县', '江孜县', '定日县', '萨迦县', '拉孜县', '昂仁县', '谢通门县', '白朗县', '仁布县', '康马县', '定结县', '仲巴县', '亚东县', '吉隆县', '聂拉木县', '萨嘎县', '岗巴县'] }, { name: '那曲地区', areaList: ['那曲县', '嘉黎县', '比如县', '聂荣县', '安多县', '申扎县', '索 县', '班戈县', '巴青县', '尼玛县'] }, { name: '阿里地区', areaList: ['普兰县', '札达县', '噶尔县', '日土县', '革吉县', '改则县', '措勤县'] }, { name: '林芝地区', areaList: ['林芝县', '工布江达县', '米林县', '墨脱县', '波密县', '察隅县', '朗 县'] }] }, { name: '河南', cityList: [{ name: '郑州市', areaList: ['市辖区', '中原区', '二七区', '管城回族区', '金水区', '上街区', '邙山区', '中牟县', '巩义市', '荥阳市', '新密市', '新郑市', '登封市'] }, { name: '开封市', areaList: ['市辖区', '龙亭区', '顺河回族区', '鼓楼区', '南关区', '郊 区', '杞 县', '通许县', '尉氏县', '开封县', '兰考县'] }, { name: '洛阳市', areaList: ['市辖区', '老城区', '西工区', '廛河回族区', '涧西区', '吉利区', '洛龙区', '孟津县', '新安县', '栾川县', '嵩 县', '汝阳县', '宜阳县', '洛宁县', '伊川县', '偃师市'] }, { name: '平顶山市', areaList: ['市辖区', '新华区', '卫东区', '石龙区', '湛河区', '宝丰县', '叶 县', '鲁山县', '郏 县', '舞钢市', '汝州市'] }, { name: '安阳市', areaList: ['市辖区', '文峰区', '北关区', '殷都区', '龙安区', '安阳县', '汤阴县', '滑 县', '内黄县', '林州市'] }, { name: '鹤壁市', areaList: ['市辖区', '鹤山区', '山城区', '淇滨区', '浚 县', '淇 县'] }, { name: '新乡市', areaList: ['市辖区', '红旗区', '卫滨区', '凤泉区', '牧野区', '新乡县', '获嘉县', '原阳县', '延津县', '封丘县', '长垣县', '卫辉市', '辉县市'] }, { name: '焦作市', areaList: ['市辖区', '解放区', '中站区', '马村区', '山阳区', '修武县', '博爱县', '武陟县', '温 县', '济源市', '沁阳市', '孟州市'] }, { name: '濮阳市', areaList: ['市辖区', '华龙区', '清丰县', '南乐县', '范 县', '台前县', '濮阳县'] }, { name: '许昌市', areaList: ['市辖区', '魏都区', '许昌县', '鄢陵县', '襄城县', '禹州市', '长葛市'] }, { name: '漯河市', areaList: ['市辖区', '源汇区', '郾城区', '召陵区', '舞阳县', '临颍县'] }, { name: '三门峡市', areaList: ['市辖区', '湖滨区', '渑池县', '陕 县', '卢氏县', '义马市', '灵宝市'] }, { name: '南阳市', areaList: ['市辖区', '宛城区', '卧龙区', '南召县', '方城县', '西峡县', '镇平县', '内乡县', '淅川县', '社旗县', '唐河县', '新野县', '桐柏县', '邓州市'] }, { name: '商丘市', areaList: ['市辖区', '梁园区', '睢阳区', '民权县', '睢 县', '宁陵县', '柘城县', '虞城县', '夏邑县', '永城市'] }, { name: '信阳市', areaList: ['市辖区', '师河区', '平桥区', '罗山县', '光山县', '新 县', '商城县', '固始县', '潢川县', '淮滨县', '息 县'] }, { name: '周口市', areaList: ['市辖区', '川汇区', '扶沟县', '西华县', '商水县', '沈丘县', '郸城县', '淮阳县', '太康县', '鹿邑县', '项城市'] }, { name: '驻马店市', areaList: ['市辖区', '驿城区', '西平县', '上蔡县', '平舆县', '正阳县', '确山县', '泌阳县', '汝南县', '遂平县', '新蔡县'] }] }, { name: '湖北', cityList: [{ name: '武汉市', areaList: ['市辖区', '江岸区', '江汉区', '乔口区', '汉阳区', '武昌区', '青山区', '洪山区', '东西湖区', '汉南区', '蔡甸区', '江夏区', '黄陂区', '新洲区'] }, { name: '黄石市', areaList: ['市辖区', '黄石港区', '西塞山区', '下陆区', '铁山区', '阳新县', '大冶市'] }, { name: '十堰市', areaList: ['市辖区', '茅箭区', '张湾区', '郧 县', '郧西县', '竹山县', '竹溪县', '房 县', '丹江口市'] }, { name: '宜昌市', areaList: ['市辖区', '西陵区', '伍家岗区', '点军区', '猇亭区', '夷陵区', '远安县', '兴山县', '秭归县', '长阳土家族自治县', '五峰土家族自治县', '宜都市', '当阳市', '枝江市'] }, { name: '襄樊市', areaList: ['市辖区', '襄城区', '樊城区', '襄阳区', '南漳县', '谷城县', '保康县', '老河口市', '枣阳市', '宜城市'] }, { name: '鄂州市', areaList: ['市辖区', '梁子湖区', '华容区', '鄂城区'] }, { name: '荆门市', areaList: ['市辖区', '东宝区', '掇刀区', '京山县', '沙洋县', '钟祥市'] }, { name: '孝感市', areaList: ['市辖区', '孝南区', '孝昌县', '大悟县', '云梦县', '应城市', '安陆市', '汉川市'] }, { name: '荆州市', areaList: ['市辖区', '沙市区', '荆州区', '公安县', '监利县', '江陵县', '石首市', '洪湖市', '松滋市'] }, { name: '黄冈市', areaList: ['市辖区', '黄州区', '团风县', '红安县', '罗田县', '英山县', '浠水县', '蕲春县', '黄梅县', '麻城市', '武穴市'] }, { name: '咸宁市', areaList: ['市辖区', '咸安区', '嘉鱼县', '通城县', '崇阳县', '通山县', '赤壁市'] }, { name: '随州市', areaList: ['市辖区', '曾都区', '广水市'] }, { name: '恩施土家族苗族自治州', areaList: ['恩施市', '利川市', '建始县', '巴东县', '宣恩县', '咸丰县', '来凤县', '鹤峰县'] }, { name: '省直辖行政单位', areaList: ['仙桃市', '潜江市', '天门市', '神农架林区'] }] }, { name: '湖南', cityList: [{ name: '长沙市', areaList: ['市辖区', '芙蓉区', '天心区', '岳麓区', '开福区', '雨花区', '长沙县', '望城县', '宁乡县', '浏阳市'] }, { name: '株洲市', areaList: ['市辖区', '荷塘区', '芦淞区', '石峰区', '天元区', '株洲县', '攸 县', '茶陵县', '炎陵县', '醴陵市'] }, { name: '湘潭市', areaList: ['市辖区', '雨湖区', '岳塘区', '湘潭县', '湘乡市', '韶山市'] }, { name: '衡阳市', areaList: ['市辖区', '珠晖区', '雁峰区', '石鼓区', '蒸湘区', '南岳区', '衡阳县', '衡南县', '衡山县', '衡东县', '祁东县', '耒阳市', '常宁市'] }, { name: '邵阳市', areaList: ['市辖区', '双清区', '大祥区', '北塔区', '邵东县', '新邵县', '邵阳县', '隆回县', '洞口县', '绥宁县', '新宁县', '城步苗族自治县', '武冈市'] }, { name: '岳阳市', areaList: ['市辖区', '岳阳楼区', '云溪区', '君山区', '岳阳县', '华容县', '湘阴县', '平江县', '汨罗市', '临湘市'] }, { name: '常德市', areaList: ['市辖区', '武陵区', '鼎城区', '安乡县', '汉寿县', '澧 县', '临澧县', '桃源县', '石门县', '津市市'] }, { name: '张家界市', areaList: ['市辖区', '永定区', '武陵源区', '慈利县', '桑植县'] }, { name: '益阳市', areaList: ['市辖区', '资阳区', '赫山区', '南 县', '桃江县', '安化县', '沅江市'] }, { name: '郴州市', areaList: ['市辖区', '北湖区', '苏仙区', '桂阳县', '宜章县', '永兴县', '嘉禾县', '临武县', '汝城县', '桂东县', '安仁县', '资兴市'] }, { name: '永州市', areaList: ['市辖区', '芝山区', '冷水滩区', '祁阳县', '东安县', '双牌县', '道 县', '江永县', '宁远县', '蓝山县', '新田县', '江华瑶族自治县'] }, { name: '怀化市', areaList: ['市辖区', '鹤城区', '中方县', '沅陵县', '辰溪县', '溆浦县', '会同县', '麻阳苗族自治县', '新晃侗族自治县', '芷江侗族自治县', '靖州苗族侗族自治县', '通道侗族自治县', '洪江市'] }, { name: '娄底市', areaList: ['市辖区', '娄星区', '双峰县', '新化县', '冷水江市', '涟源市'] }, { name: '湘西土家族苗族自治州', areaList: ['吉首市', '泸溪县', '凤凰县', '花垣县', '保靖县', '古丈县', '永顺县', '龙山县'] }] }, { name: '广东', cityList: [{ name: '广州市', areaList: ['市辖区', '东山区', '荔湾区', '越秀区', '海珠区', '天河区', '芳村区', '白云区', '黄埔区', '番禺区', '花都区', <span class="" hl="" <="" div="">">
-->
相关文章推荐
- Android 地址选择器,实现省市区三级联动
- Android 地址选择器,实现省市区三级联动
- 【2018最新的省市区】获取json,实现三级联动选择省市区(底部源码地址)
- 使用ionic开发移动app的过程中经验总结
- android 省市县街道地址选择 三级联动 四级联动
- 微信小程序开发之三级联动地址选择器
- AJAX三级联动省市选择,使用jquery+html+XML
- ionic省市县三级联动
- phonegap 性能优化 以及 phonegap + Angularjs + ionic 移动 app 开发介绍
- ionic react-native和native开发移动app到底那个好
- Android 省市县 三级联动选择(android-wheel的使用)
- 全国省市县三级地址联动js
- AJAX三级联动省市选择,使用jquery+html+XML
- Html5必看:教你如何选择移动APP开发框架
- ionic 开发APP 安装配置详解以及 cordova 环境配置详细过程
- Ionic 让你一见钟情的移动App开发框架
- ionic+AnjularJs实现省市县三级联动效果
- EXT 省市三级联动及默认选择
- jquery省市县三级地址联动
- Hybird HTML5 App(移动应用开发)之:了解Ionic框架