Angularjs 學習總結 -- 實現省市的三級聯動
一、前言
最近在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附件無法上傳，大家網上找一個吧