标签：
目的是選擇縣市後，要對應下該縣市下的地區與郵遞區號，如圖所示。
首先，先建立好Html元素
1 |
<div> |
2 |
<select> |
3 |
<option value="">--請選擇--</option> |
4 |
</select> |
5 |
|
6 |
<select > |
7 |
<option value="">--請選擇--</option> |
8 |
</select> |
9 |
</div> |
放入Angularjs tag
01 |
<body ng-app=""> |
02 |
<div ng-controller="zip"> |
03 |
<select ng-model="SelCity" ng-options="City.name for City in Citys" ng-change="update(SelCity)"> |
04 |
<option value="">--請選擇--</option> |
05 |
</select> |
06 |
|
07 |
<select ng-model="SelArea" ng-options="SelCity for SelCity in level2" > |
08 |
<option value="">--請選擇--</option> |
09 |
</select> |
10 |
</div> |
11 |
</body> |
建立controller 與 model
01 |
function zip ($scope) //controller 名稱 |
02 |
{ |
03 |
$scope.Citys= //model 內容 |
04 |
[ |
05 |
{ |
06 |
name:"台北市", |
07 |
areas:["中正區100", "大同區103", "中山區104", "松山區105", "大安區106", "萬華區108", "信義區110", "士林區111", "北投區112", "內湖區114", "南港區115", "文山區116"] |
08 |
}, |
09 |
|
10 |
{ |
11 |
name:"新北市", |
12 |
areas: ["萬里鄉207", "金山鄉208", "板橋市220", "汐止市221", "深坑鄉222", "石碇鄉223", "瑞芳鎮224", "平溪鄉226", "雙溪鄉227", "貢寮鄉228", "新店市231", "坪林鄉232", "烏來鄉233", "永和市234", "中和市235", "土城市236", "三峽鎮237", "樹林市238", "鶯歌鎮239", "三重市241", "新莊市242", "泰山鄉243", "林口鄉244", "蘆洲市247", "五股鄉248", "八里鄉249", "淡水鎮251", "三芝鄉252", "石門鄉253"] |
13 |
}, |
14 |
{ |
15 |
name:"基隆市", |
16 |
areas:["仁愛區200", "信義區201", "中正區202", "中山區203", "安樂區204", "暖暖區205", "七堵區206"] |
17 |
} |
18 |
]; |
當選擇縣市的時候，要動態再產生次選單的區域與郵遞區號。用到 ng-change 並放入一個函式 update() 並把選擇到的值傳入函式
1 |
ng-change="update(SelCity) |
寫下第2層選單內容
1 |
$scope.update = function (selectedValue) { |
2 |
$scope.level2 = selectedValue.areas; |
3 |
}; |
其實這樣就可以完成雙層動態下拉選單了。
完整程式碼連結 : http://jsbin.com/iYEdOBI/44/edit
原文：http://www.dotblogs.com.tw/hsuizip/archive/2014/01/28/142382.aspx
标签：
原文地址：http://www.cnblogs.com/leong/p/4272061.html
