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 ...
随机推荐
- Contact项目梳理
1. 共三张表:user用户表 group分组表 contact联系人表 entity 分模块,三个实体类,三个模块 2. 先注册再登录 DAO:UserDAOImpl public User g ...
- php : 自定义分页类
Page.class.php : <?php namespace Tools; class Page { private $total; //数据表中总记录数 private $listRows ...
- 书__Oracle
1.高可用性 1.1.ORACLE数据高可用之路 1.2.Oracle数据库进阶-高可用性.性能优化和备份恢复 2. 3. 4. 5.
- WeX5的简单介绍及UI的简单讲解
WeX5的简单介绍及UI的简单讲解 (2016-01-13 14:49:05) 标签: it 分类: WeX5的初步自学 一.WeX5的简单讲解 1.WeX5是前端快速开发框架,可开发跨端运行应用.是 ...
- build.fxbuild打不开 Failed to create the part's controls
Failed to create the part's controls 以文本形式打开之后,发现编码的地方不是常用编码 将之修改为GBK 然后就可以正常打开了 最后把eclipse中的编码统一设置为 ...
- java中Array/List/Map/Object与Json互相转换详解
http://blog.csdn.net/xiaomu709421487/article/details/51456705 JSON(JavaScript Object Notation): 是一种轻 ...
- text-decoration
2016-08-18 text-decoration blink貌似在firefox里也不起作用? <p style="color:red;text-decoration:unde ...
- Find命令的用法
1. 在某目录下查找文件 [root@localhost ~]# find /usr/local -name pci.ids* /usr/local/share/pci.ids.gz [root@lo ...
- ORACLE RAISE
ORACLE 出错信息的输出 偷懒的办法直接在Exception 后使用raise但是错误信息不是很完整使用RAISE_APPLICATION_ERROR(-20999, DBMS_UTILITY.f ...
- 关于启用 HTTPS 的一些经验分享（二）
转载: 关于启用 HTTPS 的一些经验分享(二) 几天前,一位朋友问我:都说推荐用 Qualys SSL Labs 这个工具测试 SSL 安全性,为什么有些安全实力很强的大厂家评分也很低?我认为这个 ...