WebForm使用AngularJS实现下拉框多级联动
- 数据准备
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
CateId = ,
CateName = Depth = ,
ParentId = ,
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
}
})
}
})
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
SubCategories = {
{
CateId = ,
CateName = Depth = ,
ParentId = ,
SubCategories = {
{
CateId = ,
CateName = Depth = ,
ParentId = ,
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
}
})
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
SubCategories = {
{
CateId = ,
CateName = Depth = ,
ParentId = ,
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
}
})
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
SubCategories = {
{
CateId = ,
CateName = Depth = ,
ParentId = ,
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
}
})
}
})
}
})
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
SubCategories = {
{
CateId = ,
CateName = Depth = ,
ParentId = ,
SubCategories = {
{
CateId = ,
CateName = Depth = ,
ParentId = ,
SubCategories = {
{
CateId = ,
CateName = Depth = ,
ParentId = ,
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
}
})
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
SubCategories = {
{
CateId = ,
CateName = Depth = ,
ParentId = ,
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
}
})
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
SubCategories = {
{
CateId = ,
CateName = Depth = ,
ParentId = ,
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
}
})
}
})
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
SubCategories = {
{
CateId = ,
CateName = Depth = ,
ParentId = ,
SubCategories = {
{
CateId = ,
CateName = Depth = ,
ParentId = ,
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
}
})
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
SubCategories = {
{
CateId = ,
CateName = Depth = ,
ParentId = ,
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
}
})
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
SubCategories = {
{
CateId = ,
CateName = Depth = ,
ParentId = ,
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
}
})
}
})
}
})
}
});
}
{
GetCategories(categoryList, categories);
}
{
{
allCategories.Add( {
CateId = subcategory.CateId,
CateName = subcategory.CateName,
Depth = subcategory.Depth,
ParentId = subcategory.ParentId
});
{
GetCategories(allCategories, subcategory.SubCategories);
}
}
}
}
{
}
} - 服务准备
{
{
ContractResolver = });
context.Response.ContentType = context.Response.Write(result);
}
{
{
}
}
} - 界面控件处理，并引入AngularJS
);
);
] = $scope.tempCate.filter(function(value, index, array) {
;
] = ] = ] = ] = $scope.tempCate.filter(function(value, index, array) {
&& value.parentId == newVal.cateId;
] = $scope.tempCate.filter(function(value, index, array) {
&& value.parentId == newVal.cateId;
] = ] = $scope.tempCate.filter(function(value, index, array) {
&& value.parentId == newVal.cateId;
];
; i > ; i--) {
];
< <option value= </ < <option value= </ <asp:HiddenField runat= </div>
<asp:Button ID= </form>
</body>
</html> - 后台代码
{
LoadCategoryId = ;
}
}
{
Button1.Text = hfCategory.Value;
}
} - 说明
- 需要引入angular.js和ui-bootstrap.js
- AngularJS的$scope.$watch很有用
- 借助隐藏域实现前台台数据传递
- 源码地址
WebForm使用AngularJS实现下拉框多级联动的更多相关文章
- 下拉框多级联动辅助js，优化您的下拉框
function IniteSelect(options) { $("body").IniteSelect(options) } (function ($) { $.fn.Init ...
- angularJs实现下拉框多选
话不多说,直接上干货. 肯定需要下拉选插件.必须引入的是 注意 先后顺序 select2.css select2-bootstrap.css select2.min.js angular.min. ...
- C# MVC LayUI实现下拉框二级联动
一.layui.use 1.LayUI的官方使用文档:https://www.layui.com/doc/ 2.layui的内置模块不是默认就加载好的,必须要执行启动模块的这种方法后模块才会加载: 3 ...
- asp 下拉框二级联动
<script language = "JavaScript"> //js开始 var aaa;//定义aaa变量 aaa=0;//aaa赋0 bb = new Arr ...
- ASP.NET——实现两个下拉框动态联动
引入: 在网页中,我们经常会遇到下图中的情况.首先在下拉框中选择所在的省,选择之后,第二个下拉框会自动加载出该省中的市.这样设计极大的方便了用户的查找.那这是如何实现的呢? 1.建立数据库 " ...
- 通过创建元素从而实现三个下拉框的联动效果(create.Element("option"))和提交表单时的验证p.match("请选择")
<html> <head> <meta charset="utf-8"> <title>下拉框</title> < ...
- django：下拉框二级联动实现
注意:只列举核心部分代码 前台模板: 第一级下拉菜单: <div class="col-sm-4"> <select data-placeholder=" ...
- angularjs 实现下拉框编辑数据回显
https://www.cnblogs.com/janice-jia/p/9764938.html 正常的js回显选择,需要添加 select ="selected",angula ...
- angularJS select下拉框检测改变
html:(已引入amazeUI) <div style="width:70px;display:inline-block;"> <form class=&quo ...
随机推荐
- NuGet安装及使用教程
Nuget是一个.NET平台下的开源的项目,它是Visual Studio的扩展.在使用Visual Studio开发基于.NET Framework的应用时,Nuget能把在项目中添加.移除和更新引 ...
- html5视屏背景注意事项。
在动手编码实现前,视频作为网页背景的有些问题我们要先考虑清楚: 并不是因为技术上可行你就可以任意使用:作为背景的视频内容必须能增强页面内容的感染力,而不是因为漂亮或技术上很酷就使用它. 作为背景的视频 ...
- XML文件解析
eclipse新建源文件的文件夹,编译后和src文件夹中放在一起 源文件 源文件的配置文件 测试文件 源文件的测试文件 一般用maven进行管理的时候就是这样 如果是小项目的话可能就src和resou ...
- eclipse加载maven工程提示pom.xml无法解析org.apache.maven.plugins:maven-resources-plugin:2.4.3解决方案
pom文件提示信息: Failure to transfer org.apache.maven.plugins:maven-resources-plugin:pom:2.4.3 from http:/ ...
- [转载]自己编写 php 在线问卷调查程序
<html> <head> <title>问卷调查</title> <meta http-equiv="Content-Type ...
- python成长之路【第十七篇】：玩转jQuery
一.jQuery简介 1.1.jQuery是什么 jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. jQuery是继prototy ...
- gulp 基本使用
1, gulp 依赖node, 使用gulp 之前,要先安装node. Node 安装完成后,它自带npm. Npm: node package manager 就是node 包管理器. 用过jav ...
- redux介绍与入门
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Helvetica } p.p2 { margin: 0.0px 0.0px 0.0px 0. ...
- oracle 存储过程创建及执行简单实例
1. 创建 CREATE OR REPLACE PROCEDURE getAplage(eNo IN NUMBER,salary OUT NUMBER) AS BEGIN SELECT AplAge ...
- 第四周作业-yjw
运动策略分析 首先我们可以得到我方击球手质心的位置,球的质心的位置,对方球门中心位置.同时以桌面边缘为坐标轴,建立笛卡尔坐标系.可以明确的一点是,击球手的运动为曲线,球进框的运动为直线,或者折线. 击 ...