前端开发angularjs制作全国地区联动
摘要：web前端开发做什么工作吗 前端开发基础班学什么区别 前端开发会遇到什么坑 [ {“id”:1,”name”:”北京市”,”city”:[ {“id”:2,”name”:”……
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
OK 这次正式完成 谢谢大家 请大家自行体会着其中的代码的美妙 我陶醉了，重点就是selsect 里面的 ng-options
下面自动运行下看看 效果吧让大家
好了 之前比较懒 修改了下运行时可以了 全国数据资源：http://www.w3cfuns.com/home.php?mod=space&uid=5458527&do=blog&quickforward=1&id=5403720
前端开发使用什么电脑配置 前端开发都可以做什么 ui前端开发是做什么的
近期评论