標籤：
目的是選擇縣市後，要對應下該縣市下的地區與郵遞區號，如圖所示。
首先，先建立好Html元素
3 |
<option value="">--請選擇--</option> |
7 |
<option value="">--請選擇--</option> |
放入Angularjs tag
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> |
07 |
<select ng-model="SelArea" ng-options="SelCity for SelCity in level2" > |
08 |
<option value="">--請選擇--</option> |
建立controller 與 model
01 |
function zip ($scope) //controller 名稱 |
03 |
$scope.Citys= //model 內容 |
07 |
areas:["中正區100", "大同區103", "中山區104", "松山區105", "大安區106", "萬華區108", "信義區110", "士林區111", "北投區112", "內湖區114", "南港區115", "文山區116"] |
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"] |
16 |
areas:["仁愛區200", "信義區201", "中正區202", "中山區203", "安樂區204", "暖暖區205", "七堵區206"] |
當選擇縣市的時候，要動態再產生次選單的區域與郵遞區號。用到 ng-change 並放入一個函式 update() 並把選擇到的值傳入函式
1 |
ng-change="update(SelCity) |
寫下第2層選單內容
view source print?
1 |
$scope.update = function (selectedValue) { |
2 |
$scope.level2 = selectedValue.areas; |
其實這樣就可以完成雙層動態下拉選單了。
完整程式碼連結 : http://jsbin.com/iYEdOBI/44/edit
原文：http://www.dotblogs.com.tw/hsuizip/archive/2014/01/28/142382.aspx
Angular JS 下拉式清單 聯動
