码迷,mamicode.com
首页 > Web开发 > 详细

Angular JS 下拉列表 联动

时间:2015-02-04 14:16:17      阅读:195      评论:0      收藏:0      [点我收藏+]

标签:

目的是選擇縣市後,要對應下該縣市下的地區與郵遞區號,如圖所示。

技术分享

首先,先建立好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

Angular JS 下拉列表 联动

标签:

原文地址:http://www.cnblogs.com/leong/p/4272061.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!