AngularJS中实现无限级联动菜单(使用demo)
昨天没来得及贴几个使用demo,今天补上,供有兴趣的同学参考 :)
1. 同步加载子选项demo
2. 异步加载子选项demo
3. 初始值回填demo
4. 倒金字塔依赖demo
directive的源代码请移步上一个帖子:
http://www.cnblogs.com/front-end-ralph/p/5131687.html
1. 同步加载子选项
在各联动菜单加载之前,我们已经通过某种方式(比如后端渲染、api依赖、deferred依赖等等)拿到了渲染各级菜单所需的各种数据,我们只需要将该数据处理为
[{
text: 'some text',
value: 'some value'
},]
的形式,并封装成数据源函数即可。以省-市联动为例:
html部分:
注意第二个select中声明了dependents="province",以此实现联动
1 2 | < select multi-level-select source="getProvinces" name="province" ng-model="form.province" empty="请选择省份"></ select > < select multi-level-select source="getCities" name="city" ng-model="form.city" empty="请选择城市" dependents="province"></ select > |
controller部分:
预处理数据,提供数据源函数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | controller( 'myCtrl' , [ '$scope' , function ($scope) { // angular使用好习惯,将primitive值放到对象上 var form = {}; $scope.form = form; var data = [{ name: '浙江' , id: 10, cities: [{ name: '杭州' , id: 100 }, { name: '宁波' , id: 101 }, { name: '温州' , id: 102 }] }, { name: '广东' , id: 20, cities: [{ name: '广州' , id: 200 }, { name: '深圳' , id: 201 }, { name: '佛山' , id: 202 }] }, { name: '山东' , id: 30, cities: [{ name: '济南' , id: 301 }, { name: '青岛' , id: 302 }, { name: '烟台' , id: 303 }] }]; var provinces = []; var citiesLookup = {}; // 预处理,返回[{text: 'some text', value: 'some value'},]的数据格式 $.each(data, function (index, province) { provinces.push({ text: province.name, value: province.id }); var cities = []; $.each(province.cities, function (index, city) { cities.push({ text: city.name, value: city.id }); }); citiesLookup[province.id] = cities; }); $scope.getProvinces = function () { return provinces; }; $scope.getCities = function (values) { return citiesLookup[values.province] || []; }; }]); |
2. 异步加载子选项demo
主要差异是数据源函数应该返回promise实例(AngularJS中使用$q即可)。为了演示方便,这里就不用$http了,除了预处理(由使用者自己的业务逻辑负责)外,完全一样。
和上一个例子非常相似,只需要将两个数据源函数修改为:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | $scope.getProvinces = function () { return $q( function (resolve) { // 异步时应返回promise,这里就不用http了,除了预处理(由使用者自己的业务逻辑负责)外,完全一样 // 如果需要缓存,也请在这里自己负责 $timeout( function () { resolve(provinces); }, 100); }); }; $scope.getCities = function (values) { return $q( function (resolve) { $timeout( function () { resolve(citiesLookup[values.province] || []); }, 100); }); }; |
3. 初始值回填
因为在开发初期这个需求就很明确了,所以使用上不需要做额外的工作,如果有初始值,只需要在controller中为其赋值即可:
1 2 3 4 5 | // angular使用好习惯,将primitive值放到对象上 var form = {}; $scope.form = form; form.province = 30; form.city = 301; |
4. 倒金子塔依赖
依赖声明是通过由逗号分割的字符串的形式完成的,使用上非常方便。
设想以下的场景:
教务处需要学生对课程进行评价,学生先选择周几,再选择时间,然后再选择具体的课程下拉框
周几和时间之间互不依赖,课程下拉框同时依赖于周几和时间,换言之,一旦周几和时间中的任意一个改变,课程下拉框就应该更新。
html部分:
注意第三个select的dependents属性是day,hour,即同时依赖于day和hour
1 2 3 | < select multi-level-select source="getDays" name="day" ng-model="form.day" empty="请选择周几"></ select > < select multi-level-select source="getHours" name="hour" ng-model="form.hour" empty="请选择时间"></ select > < select multi-level-select source="getCourses" name="course" ng-model="form.course" empty="请选择课程" dependents="day,hour"></ select > |
controller部分:
和前面的例子类似,没有什么特殊的,预处理数据并提供数据源函数即可。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | controller( 'myCtrl' , function ($scope) { var form = {}; $scope.form = form; $scope.getDays = function () { var days = '一二三' .split( '' ); days.forEach( function (item, index) { days[index] = { text: '星期' + item, value: '星期' + item }; }); return days; }; $scope.getHours = function () { return [{ text: '09:00-12:00' , value: '1' }, { text: '14:00-17:00' , value: '2' }]; }; var courses = { '星期一' : { '1' : [{ value: '数学' , text: '数学' }, { value: '精读' , text: '精读' }], '2' : [{ value: '足球' , text: '足球' }] }, '星期二' : { '1' : [{ value: '听力' , text: '听力' }], '2' : [{ value: '数学' , text: '数学' }] }, '星期三' : { '1' : [{ value: '计算机' , text: '计算机' }], '2' : [{ value: '游泳' , text: '游泳' }, { value: '古汉语' , text: '古汉语' }] }, }; $scope.getCourses = function (values) { if (!values.day || !values.hour) { return []; } return courses[values.day][values.hour]; }; }); |
有兴趣的同学如果需要其他应用场景下的demo也可以告诉我 :)
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?