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 ...
随机推荐
- string黑科技
1. string对象的定义和初始化以及读写 string s1; 默认构造函数,s1为空串string s2(s1); 将s2初始化为s1的一个副本string s3("valuee&qu ...
- RSA3：预提取数据
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- Javascript学习笔记：2种其他类型转换为数字Number类型的方式
①使用parseInt()/parseFloat()(在ECMAScript6中是Number.parseInt()/Number.parseFloat()) console.log(parseInt ...
- lightBox灯箱效果
最近想做一个类似QQ空间相册,点击照片会出现一个遮罩层,然后显示照片,可以左右切换照片,上网查了,原来叫灯箱效果,于是自己也写了一个简单的灯箱效果,并进行了简单封装,封装得不是很完善,后面还需要改进, ...
- iOS10 拍照崩溃问题
根据相对应得功能添加相关权限即可,没必要全部添加,后面的描述可以官方点,因为会以弹出框的形式访问的,比如相机权限后面的描述可以为:这个应用需要访问相机:后续如果发现其他iOS10上面的问题会及时更新的
- ArcGIS影像配准与空间配准
ArcGIS影像配准与空间配准 ArcGIS影像配准与空间配准 地图配准可分为影像配准和空间配准.影像配准的对象是raster图,譬如TIFF图.配准后的图可以保存为ESRI GRID, TIFF,或 ...
- ThinkPHP3.2中if判断条件是两个变量
<select name="typeId"> <foreach name="typeInfo" item="v"> ...
- python 安装MySQLdb mysql_config not fount
缺少 libmysqlclient-dev 应该是安装MySQL的锅. 资料:http://www.cnblogs.com/xiazh/archive/2012/12/12/2814289.html ...
- 转：OSGi 入门篇：生命周期层
OSGi 入门篇:生命周期层 前言 生命周期层在OSGi框架中属于模块层上面的一层,它的运作是建立在模块层的功能之上的.生命周期层一个主要的功能就是让你能够从外部管理应用或者建立能够自我管理的应用(或 ...
- PBOC~PPT-补充A(转)
qPBOC简介PBOC 3.0非接交易包括:非接PBOC和qPBOC.非接PBOC流程与接触式无异,仅命令交互方式改变,故不再赘述. qPBOC - 快速借记/贷记,交易特点:目录选择PPSE使用“2 ...