找回密码
当前位置：前端开发者 > AngularJS > 正文

前端开发angularjs制作全国地区联动

2018-09-09 20:59:16 分类：AngularJS 阅读(267) 评论(0)

web前端开发做什么工作吗 前端开发基础班学什么区别 前端开发会遇到什么坑

[
{“id”:1,”name”:”北京市”,”city”:[
{“id”:2,”name”:”市辖区”,”area”:[
{“id”:3,”name”:”东城区”},
{“id”:4,”name”:”西城区”},
{“id”:5,”name”:”崇文区”,},]}
]},
{“id”:22,”name”:”天津市”,”city”:[
{“id”:23,”name”:”市辖区”,”area”:[
{“id”:24，”name”:”和平区”},
{“id”:25,”name”:”河东区}]}
]}
]

js控制器端
<div class=”blockcode”><blockquote>function mapselect($scope,$http){
$http.get(‘/map.json’).success(function(data, status, headers, config) {
$scope.division=data;
}).error(function(data, status) {
alert(“error”)
});
}//或者可以直接这样写[/indent]function mapselect($scope){
$scope.division=[
{“id”:1,”name”:”北京市”,”city”:[
{“id”:2,”name”:”市辖区”,”area”:[
{“id”:3,”name”:”东城区”},
{“id”:4,”name”:”西城区”},
{“id”:5,”name”:”崇文区”,},]}
]},
{“id”:22,”name”:”天津市”,”city”:[
{“id”:23,”name”:”市辖区”,”area”:[
{“id”:24，”name”:”和平区”},
{“id”:25,”name”:”河东区}]}
]}
]
}[indent]//直接把数据保存到变量里面，不过最好是按第一种方法，因为全国的数据很多哦！[/indent]
这个js代码的意思就是获取map.json的数据保存到了 division变量 然后···就完了····好了 js代码写完了；还有dom结构，

<span style=”line-height: 1.5;”></span><div class=”blockrun”><blockquote><span style=”line-height: 1.5;”><html></span><body ng-app>
<script src=”http://apps.bdimg.com/libs/angular.js/1.2.15/angular.min.js”>
</script>
<script>
function mapselect($scope){
$scope.division=[
{“id”:1,”name”:”北京市”,”city”:[
{“id”:2,”name”:”市辖区”,”area”:[
{“id”:3,”name”:”东城区”},
{“id”:4,”name”:”西城区”},
{“id”:5,”name”:”崇文区”,},]}
]},
{“id”:22,”name”:”天津市”,”city”:[
{“id”:23,”name”:”市辖区”,”area”:[
{“id”:24，”name”:”和平区”},
{“id”:25,”name”:”河东区}]}
]}
]
}
</script>
<div class=”row” ng-controller=”mapselect”>

<select required=””ng-model=”sheng” ng-options=”m.name for m in division” >

</select>

<select required=”” ng-model=”shi” ng-options=”m.name for m in sheng.city” >

</select>
<select required=”” ng-model=”qu” ng-options=”m.name for m in shi.area” “>

</select>

</div>
</body>
</html>
代码片段 1

<!DOCTYPE html>
<html>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
    <title>Document</title>
</head>
<body ng-app>
    <script src=”http://apps.bdimg.com/libs/angular.js/1.2.15/angular.min.js”></script>
    <script>
        function mapselect($scope) {
            $scope.division = [
                {
                    “id”: 1, “name”: “北京市”, “city”: [
                        {
                            “id”: 2, “name”: “市辖区”, “area”: [
                                { “id”: 3, “name”: “东城区” },
                                { “id”: 4, “name”: “西城区” },
                                { “id”: 5, “name”: “崇文区”, }]
                        }
                    ]
                },
                {
                    “id”: 1, “name”: “北京市2”, “city”: [
                        {
                            “id”: 2, “name”: “市辖区2”, “area”: [
                                { “id”: 3, “name”: “东城区2” },
                                { “id”: 4, “name”: “西城区2” },
                                { “id”: 5, “name”: “崇文区2”, }]
                        }
                    ]
                }
            ]
        }
    </script>
    <div class=”row” ng-controller=”mapselect”>
        <select required=”” ng-model=”sheng” ng-options=”m.name for m in division”>
        </select>
        <select required=”” ng-model=”shi” ng-options=”m.name for m in sheng.city”>
        </select>
        <select required=”” ng-model=”qu” ng-options=”m.name for m in shi.area”>
        </select>
    </div>
</body>
</html>

OK 这次正式完成 谢谢大家 请大家自行体会着其中的代码的美妙 我陶醉了，重点就是selsect 里面的 ng-options
下面自动运行下看看 效果吧让大家

好了 之前比较懒 修改了下运行时可以了 全国数据资源：http://www.w3cfuns.com/home.php?mod=space&uid=5458527&do=blog&quickforward=1&id=5403720

前端开发使用什么电脑配置 前端开发都可以做什么 ui前端开发是做什么的

» 本文来自：前端开发者 » 《前端开发angularjs制作全国地区联动》
» 本文链接地址：https://www.rokub.com/5570.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论