特色栏目： python 批处理 net编程 Javascript Php Asp Css Html5 Android seo centos

地址选择器

来源：互联网收集：自由互联发布时间：2021-06-12

index.html ! DOCTYPE html html head meta charset ="utf-8" / title / title / head body ng-app ="myApp" ng-controller ="myCtrl" div 选择省： select ng-model ="selectedProvince" ng-change ="addsChange(‘province‘)" ng-options ="province

分享图片

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body ng-app="myApp" ng-controller="myCtrl">
        <div>
            选择省：
            <select ng-model="selectedProvince"  ng-change="addsChange(‘province‘)" 
                    ng-options="province as province.name for province in provinces">
                    <option value="">--请选择--</option>
            </select>
        </div>
        
        
        <div>
            选择市：
            <select ng-model="selectedCity"  ng-change="addsChange(‘city‘)" 
                    ng-options="city as city.name for city in citys">
                    <option value="">--请选择--</option>
            </select>
        </div>
        
        <div>
            选择县：
            <select ng-model="selectedCounty"  ng-change="addsChange(‘county‘)" 
                    ng-options="county as county.name for county in countys">
                    <option value="">--请选择--</option>
           </select>
        </div>
        
        <div>
            选择镇：
            <select ng-model="selectedTown"  ng-change="addsChange(‘town‘)" 
                    ng-options="town as town.name for town in towns">
                    <option value="">--请选择--</option>
            </select>
        </div>
                        
        
        <div>
            {{finalAdds}}
        </div>
        <script src="lib/angular.js" ></script>
        <script src="main.js" ></script>
        <script src="service.js" ></script>
        <script src="controller.js" ></script>
    </body>
</html>


<!--参考：
http://lbs.amap.com/api/webservice/guide/api/georegeo
http://lbs.amap.com/api/javascript-api/example/district-search/city-drop-down-list/-->

View Code

controller

app.controller(‘myCtrl‘, function($scope,appSer) {
    
    //加载省市县镇数据的公共方法
    var lazyLoadAdds=function(param,leve){
        appSer.getAdds(param).then(function(rep){
            $scope[leve]=rep.data.districts[0].districts;
        })
    }

    //初始化加载所有省数据
    lazyLoadAdds({},‘provinces‘);
    //动态加载省以下的数据
    $scope.addsChange=function(leve){
        if(leve==‘province‘){//根据选择的省，加载所有的市
            lazyLoadAdds({keywords:$scope.selectedProvince.adcode,level:‘province‘},‘citys‘);
            $scope.finalAdds=$scope.selectedProvince.name;
        }else if(leve==‘city‘){//根据市,加载所有的县
            lazyLoadAdds({keywords:$scope.selectedCity.adcode,level:‘city‘},‘countys‘);
            $scope.finalAdds=$scope.selectedProvince.name+‘，‘+$scope.selectedCity.name
        }else if(leve==‘county‘){//根据县,加载所有的镇
            lazyLoadAdds({keywords:$scope.selectedCounty.adcode,level:‘district‘},‘towns‘);
            $scope.finalAdds=$scope.selectedProvince.name+‘，‘+$scope.selectedCity.name+‘，‘+$scope.selectedCounty.name
        }else{
            $scope.finalAdds=$scope.selectedProvince.name+‘，‘+$scope.selectedCity.name+‘，‘+$scope.selectedCounty.name+‘，‘+$scope.selectedTown.name
        }
    }
});

service

app.service(‘appSer‘,function($http){
    return {
        getAdds:function(param){
            param[‘key‘]=‘8775c984ddf4f55b33c70fc406026136‘;
            var url=‘http://restapi.amap.com/v3/config/district‘;
            return $http({
                method:"get",
                url:url,
                params:param
            })
        }
    }
})

上一篇：web app
下一篇：vue-cli 搭建工程配置 => 你想要这里都有

地址选择器

相关文章