AngularJS 多级下拉框
<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 多级下拉框的更多相关文章
- avalon.js 多级下拉框实现
学习avalon.js的时候,有一个多级下拉框的例子,地址 戳这里 代码实现了联动, 但是逻辑上面理解有点难度,获取选择的值 和 页面初始化 功能存在问题. 在写地图编辑的时候,也用到了多级下拉框,特 ...
- angularJs实现下拉框多选
话不多说,直接上干货. 肯定需要下拉选插件.必须引入的是 注意 先后顺序 select2.css select2-bootstrap.css select2.min.js angular.min. ...
- WebForm使用AngularJS实现下拉框多级联动
数据准备 ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, CateId = , ...
- java 移动开发获取多级下拉框json数据的类和mobile-select-area插件
我这里以行政区划做例子 //这个类是把数据库中的行政区划转化为json格式的data @SuppressWarnings("rawtypes")public class XzqhL ...
- angularjs 实现下拉框编辑数据回显
https://www.cnblogs.com/janice-jia/p/9764938.html 正常的js回显选择,需要添加 select ="selected",angula ...
- 简单JS多级下拉框无刷新
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- angularJS select下拉框检测改变
html:(已引入amazeUI) <div style="width:70px;display:inline-block;"> <form class=&quo ...
- 【经验】angularjs 实现带查找筛选功能的select下拉框
一.背景 对于select的下拉列表,像国家选择这样的功能,全世界那么多国家,一直拉滚动条多辛苦,眼睛也要盯着找,累!so,为优化用户体验,带查找功能的下拉框是非常非常有必要的.都知道jquery里有 ...
- angularjs下拉框实现渲染html
angualrjs处于安全的考虑,插值 指令会对相应字符串进行过滤,避免出现html攻击.但是在一些时候,我们需要渲染html,比如实现一个分级的下拉框,代码如下: <body ng-app=& ...
随机推荐
- mysql 按日期分组
select DATE_FORMAT(NOW(),'%Y%m%d') days,count(caseid) count from tc_case group by days; //date_forma ...
- 【t009】最大矩形面积
Time Limit: 2 second Memory Limit: 32 MB [问题描述] 在x轴上水平放置着N个矩形,每个矩形都有相同的宽度,但是它们的高度并不相同. 比如,图1包含的矩形的高分 ...
- 【C++竞赛 G】Lines
Time Limit: 3s Memory Limit: 64MB 问题描述 Ljr has several lines. The lines are covered on the X axis. L ...
- 《iOS Human Interface Guidelines》——Edit Menu
编辑菜单 用户能够显示一个编辑菜单来在文本视图.网页视图和图像视图运行诸如剪切.粘贴和选择的操作. 你能够调整一些菜单的行为来在你的app中给用户给多的内容控制.比方你能够: 指定哪一个标准菜单命令对 ...
- Windows环境搭建Web自己主动化測试框架Watir(基于Ruby)
web自己主动化測试一直是一个比較迫切的问题 图1-1 须要安装的工具 http://railsinstaller.org/ 由于安装Ruby还须要用到其它的一些开发工具集.所以建议从站点http:/ ...
- [RxJS] Split an RxJS observable conditionally with windowToggle
There are variants of the window operator that allow you to split RxJS observables in different ways ...
- Android NDK开发之Jni的数据类型
在前面的一篇博客<Android NDK开发简介>,我简单地说明了Android NDK开发的流程,以及其重要的一环:JNI层得开发.今天我再详细说明一下自己的学习经验. JNI是Java ...
- Android的NDK开发(1)————Android JNI简介与调用流程
1.JNI简介 JNI全称为Java Native Interface(Java本地调用).从Java1.1开始,JNI成为java平台的一部分,它允许Java代码和其他语言写的代码(如C&C ...
- 一个好汉一个帮:前端UI改造
今天是周六,继续工作中. 只是,不是自己亲自参与搞代码,让一起好的同事帮我美化界面. 虽说前端,我也可以搞定, but,but呀,所有的工作都让我来搞,实在是太累太烦了. 前端,样式,目前做很多是模仿 ...
- 从Handler+Message+Looper源代码带你分析Android系统的消息处理机制
PS一句:不得不说CSDN同步做的非常烂.还得我花了近1个小时恢复这篇博客. 引言 [转载请注明出处:http://blog.csdn.net/feiduclear_up CSDN 废墟的树] 作为A ...