一、前言
最近在NG项目做界面中，需要实现一个省市区的三级联动，这个东西拿到手，想想是很简单的，网上有大量关于
的三级联动JS或者JQuery代码实现，但其实大部分实现的有点复杂，也不适于移植到NG的前端项目，本文章介绍NG的实现方式，一如既然的简单暴力。
二、实现
1、准备工作，三级联动的省市级数据，我们就不需要存在数据库了，数据量也只才几十K而已，我们直接使用前端的json文件吧，简单暴力。
网上有很多解析好的json格式文件，但数据结构得有规定，这里我把我准备的json文件放进附件，取名为city.json（目录js/prod/data/city.json）
2、OK,数据源有了，那么我们就直接上代码吧：
JS控制器：
//地址编辑模态框的Controller
app.controller('editAddrCtrl',['$scope','$modalInstance'，'$http',function($scope,$modalInstance,$http){
$http.get('static/js/prod/data/city.json').success(function(data) {
$scope.division = data;
}).error(function(e) {
toaster.pop('error','系统错误 ' + '加载城市信息失败');
});
$scope.cancel = function() {
$modalInstance.dismiss();
};
}]);
HTML：
<form name="myForm" class="form-horizontal" role="form" ng-submit="save(address)" style="min-height: 253px;">
<div class="form-group ">
<label for="area" class="col-md-3 col-sm-4 control-label"><strong
class="text-inverse">* </strong>所在地区：</label>
<div class="row checkbox">
<div class="col-md-3">
<select class="form-control"
ng-model="address.province"
ng-options="key as key for (key,value) in division"
ng-change="address.city='';address.district='';">
<option value="">省</option>
</select>
</div>
<div class="col-md-3 ">
<select class="form-control" ng-model="address.city"
ng-options="key as key for (key,value) in division[address.province]"
ng-change="address.district='';">
<option value="">市</option>
</select>
</div>
<div class="col-md-3">
<select class="form-control" ng-model="address.district"
ng-options="value as value for value in division[address.province][address.city]" required>
<option value="">区</option>
</select>
</div>
</div>
</div>
</form>
代码分析一下：js代码非常简单，直接用$http拿到了json的数据，放进division里面；关键在html代码的写法，
<select class="form-control"
ng-model="address.province"
ng-options="key as key for (key,value) in division"
ng-change="address.city='';address.district='';">
<option value="">省</option>
</select>
这里用了两个关键指令，ng-options和ng-change，ng-options是拿到数据，写法是根据json的数据结构（key，value的三层Map数据），使用过Map<String,String>数据就知道，第一层数据是省份，ng-options和Html 的options类似，展示选择项，ng-change是格式化省下下面的城市和区、
我粘贴的是省，所有一但改变省份，address.city='';address.district=''，城市和区都赋值空。
总结：这个实现是不是非常简单，加起来才几句代码。有两个重点：第一：json数据源数据格式必须是我们key,valeu形式的三级数组；第二、使用NG的两个强大指令。
city.json附件无法上传，大家网上找一个吧 （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
