<div ng-app="MultiDropDownApp" ng-controller="MultiDropDownControl as vm">
<label>选择地址:</label>
<!--ng-options加载所有选择项,ng-model记录当前选择项-->
<select ng-model="vm.province" ng-options="x.name for x in vm.provinceSort"
ng-change="vm.selectProvince()" id="" value="" class="form-control width-25">
<option value="">请选择</option> </select>
<label>—</label>
<select ng-model="vm.city" ng-options="x.name for x in vm.citySort"
id="" value="" class="form-control width-25">
<option value="">请选择</option> </select>
</div>
<script src="~/Scripts/angular.min.js"></script>
<script>
var app = angular.module('MultiDropDownApp', []);
//可以添加上自己注入的服务
app.controller('MultiDropDownControl', ['$scope', '$http',
function ($scope, $http) {
var vm = this;
vm.provinceSort = [];
vm.citySort = []; //选择省级单位,初始化市级数据 二级联动
vm.selectProvince = function () {
var fatherID = vm.province.id;
vm.citySort = [];
$http({
method: 'POST',
url: '/AngularjsStudy/GetChildrenSort',
data: { fatherID: fatherID }
}).then(function successCallback(data) {
vm.citySort = data.data;
}, function errorCallback(response) {
// 请求失败执行代码
});
} //初始化页面
function init() {
//省
$http({
method: 'POST',
url: '/AngularjsStudy/GetProvinceSort',
data: {}
}).then(function successCallback(data) {
//加载下拉框数据
vm.provinceSort = data.data;
//设置默认选项
vm.province = vm.provinceSort[0];
}, function errorCallback(response) {
// 请求失败执行代码
});
} //初始化
init();
}])
</script>

Controller

        public ActionResult GetProvinceSort()
{
List<District> districts = new List<District>();
districts.Add(new District() {id=1,fatherID=0,name="湖南省" });
districts.Add(new District() { id =2, fatherID = 0, name = "湖北省" });
districts.Add(new District() { id =3, fatherID = 0, name = "四川省" });
return Json(districts);
} public ActionResult GetChildrenSort(int fatherID)
{
List<District> districts = new List<District>();
switch (fatherID)
{
case 1:
districts.Add(new District() { id = 4, fatherID = 1, name = "长沙市" });
districts.Add(new District() { id = 5, fatherID = 1, name = "岳阳市" });
districts.Add(new District() { id = 6, fatherID = 1, name = "株洲市" });
return Json(districts);
case 2:
districts.Add(new District() { id = 7, fatherID = 2, name = "武汉市" });
districts.Add(new District() { id = 8, fatherID = 2, name = "宜昌市" });
return Json(districts);
case 3:
districts.Add(new District() { id = 9, fatherID = 3, name = "成都市" });
districts.Add(new District() { id = 10, fatherID = 3, name = "遂宁市" });
districts.Add(new District() { id = 11, fatherID = 3, name = "巴中市" });
districts.Add(new District() { id = 12, fatherID = 3, name = "绵阳市" });
districts.Add(new District() { id = 13, fatherID = 3, name = "南充市" });
return Json(districts);
default:
districts.Add(new District() { id = 14, fatherID = -1, name = "不知道你选了什么∑q|゚Д゚|p" });
return Json(districts);
}
}

Model

public class District
{
public int id { get; set; }
/// <summary>
/// 根节点FatherID=0
/// </summary>
public int fatherID { get; set; }
public string name { get; set; }
}

AngularJS 多级下拉框的更多相关文章

  1. avalon.js 多级下拉框实现

    学习avalon.js的时候,有一个多级下拉框的例子,地址 戳这里 代码实现了联动, 但是逻辑上面理解有点难度,获取选择的值 和 页面初始化 功能存在问题. 在写地图编辑的时候,也用到了多级下拉框,特 ...

  2. angularJs实现下拉框多选

    话不多说,直接上干货. 肯定需要下拉选插件.必须引入的是   注意 先后顺序 select2.css select2-bootstrap.css select2.min.js angular.min. ...

  3. WebForm使用AngularJS实现下拉框多级联动

    数据准备 ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,                                             CateId = ,        ...

  4. java 移动开发获取多级下拉框json数据的类和mobile-select-area插件

    我这里以行政区划做例子 //这个类是把数据库中的行政区划转化为json格式的data @SuppressWarnings("rawtypes")public class XzqhL ...

  5. angularjs 实现下拉框编辑数据回显

    https://www.cnblogs.com/janice-jia/p/9764938.html 正常的js回显选择,需要添加 select ="selected",angula ...

  6. 简单JS多级下拉框无刷新

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. angularJS select下拉框检测改变

    html:(已引入amazeUI) <div style="width:70px;display:inline-block;"> <form class=&quo ...

  8. 【经验】angularjs 实现带查找筛选功能的select下拉框

    一.背景 对于select的下拉列表,像国家选择这样的功能,全世界那么多国家,一直拉滚动条多辛苦,眼睛也要盯着找,累!so,为优化用户体验,带查找功能的下拉框是非常非常有必要的.都知道jquery里有 ...

  9. angularjs下拉框实现渲染html

    angualrjs处于安全的考虑,插值 指令会对相应字符串进行过滤,避免出现html攻击.但是在一些时候,我们需要渲染html,比如实现一个分级的下拉框,代码如下: <body ng-app=& ...

随机推荐

  1. Java NIO详细介绍

    不错的文章,推荐一下. http://www.ibm.com/developerworks/cn/education/java/j-nio/j-nio.html JavaNIO非堵塞技术实际是采取Re ...

  2. js进阶 11-14 jquery如何实现元素的替换和遍历

    js进阶  11-14  jquery如何实现元素的替换和遍历 一.总结 一句话总结:替换:replaceAll() 与 replaceWith().遍历:each(). 1.replaceAll() ...

  3. jQuery笔记-jQuery筛选器children()详解

    jQuery的选择包含两种,一种是选择器,一种是筛选器.筛选器是对选择器选定的jQuery对象做进一步选择. children()是一个筛选器,顾名思义就是筛选孩子,筛选那些符合条件的孩子. 完整的格 ...

  4. 忙里偷闲( ˇˍˇ )闲里偷学【C语言篇】——(6)动态内存分配

    一.传统数组的缺点: 1.数组的长度必须事先定制,且只能是常整数,不能是变量 int len = 5; int a[len]; //error 2.传统形式定义的数组,该程序的内存程序员无法手动释放 ...

  5. 学习游戏服务器开发必看,C++游戏服务器开发常用工具介绍

    C++游戏服务器开发常用工具介绍 在软件开发过程中需要使用的工具类型实属众多,从需求建模到软件测试,从代码编译到工程管理,这些工具都对项目有着不可替代的作用.庄子有云,"吾生也有涯,而知也无 ...

  6. amazeui中的js插件有哪些(详解功能)

    amazeui中的js插件有哪些(详解功能) 一.总结 一句话总结: 二.amazeui中的js插件有哪些 1.UI 增强 警告框Alert 按钮交互Button 折叠面板Collapse 下拉组件D ...

  7. NOIP模拟 run - 双向链表

    题目大意: 企鹅国正在举办全面运动会,第一项比赛就是跑步.N 个人在圆形跑道上跑步,他们都有各自的速度和起点.但这个跑步规则很奇怪,当两个人相遇的时候编号较小的就会出局,当场上剩下最后一个人的时候跑步 ...

  8. 【BZOJ 1038】[ZJOI2008]瞭望塔

    [题目链接]:http://www.lydsy.com/JudgeOnline/problem.php?id=1038 [题意] [题解] 可以看到所有村子的瞭望塔所在的位置只会是在相邻两个村子所代表 ...

  9. redis集群搭建手册

    搭建集群需要用到安装后的redis单机版的bin目录,所以我们先搭建redis单机版 Redis单机版搭建: 因为需要安装redis源码包,所以我们需要gcc环境支持 : 使用FTP工具将压缩包上传至 ...

  10. Swift API设计原则

    注: 本文摘自 Swift API设计指南 一.基本原则 通俗易懂的API是设计者最重要的目标.实体.变量.函数等都具有一次申明.重复使用的性质,所以一个好的API设计,应该能够使用少量的解读和示例就 ...