Angular.JS实现无限级的联动菜单(使用demo)


Posted in Javascript onFebruary 08, 2017

前言

之前给大家介绍过一篇关于AngularJS中实现无限级联动菜单的文章,但没来得及和大家分享使用的示例,下面这篇文章就来给大家分享下几个使用的demo。

文中包括demo如下:

1. 同步加载子选项demo

2. 异步加载子选项demo

3. 初始值回填demo

4. 倒金字塔依赖demo

注意:在阅读本文前请先移步上一篇文章:https://3water.com/article/78126.htm

1. 同步加载子选项

在各联动菜单加载之前,我们已经通过某种方式(比如后端渲染、api依赖、deferred依赖等等)拿到了渲染各级菜单所需的各种数据,我们只需要将该数据处理为

[{
text: 'some text',
value: 'some value'
},]

的形式,并封装成数据源函数即可。以省-市联动为例:

html部分:

注意第二个select中声明了dependents="province" ,以此实现联动

<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部分:

预处理数据,提供数据源函数

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了,除了预处理(由使用者自己的业务逻辑负责)外,完全一样。

和上一个例子非常相似,只需要将两个数据源函数修改为:

$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中为其赋值即可:

// angular使用好习惯,将primitive值放到对象上
var form = {};
$scope.form = form;
form.province = 30;
form.city = 301;

4. 倒金子塔依赖

依赖声明是通过由逗号分割的字符串的形式完成的,使用上非常方便。

设想以下的场景:

教务处需要学生对课程进行评价,学生先选择周几,再选择时间,然后再选择具体的课程下拉框

周几和时间之间互不依赖,课程下拉框同时依赖于周几和时间,换言之,一旦周几和时间中的任意一个改变,课程下拉框就应该更新。

html部分:

注意第三个select的dependents属性是day,hour,即同时依赖于day和hour

<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部分:

和前面的例子类似,没有什么特殊的,预处理数据并提供数据源函数即可。

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];
 };
});

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
基于jquery实现的鼠标拖拽元素复制并写入效果
Aug 23 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
Jan 16 Javascript
jquery加载图片时以淡入方式显示的方法
Jan 14 Javascript
jquery中attr和prop的区别分析
Mar 16 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
Sep 14 Javascript
获取jqGrid中选择的行的数据
Nov 30 Javascript
node.js调用Chrome浏览器打开链接地址的方法
May 17 Javascript
js使用html2canvas实现屏幕截取的示例代码
Aug 28 Javascript
基于JavaScript实现瀑布流布局
Aug 15 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
Sep 11 Javascript
通过实例解析json与jsonp原理及使用方法
Sep 27 Javascript
JavaScript 实现轮播图特效的示例
Nov 05 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
Feb 08 #Javascript
jQuery实现级联下拉框实战(5)
Feb 08 #Javascript
webpack入门+react环境配置
Feb 08 #Javascript
JavaScript实现鼠标点击导航栏变色特效
Feb 08 #Javascript
jQuery实现优雅的弹窗效果(6)
Feb 08 #Javascript
JavaScript中的子窗口与父窗口的互相调用问题
Feb 08 #Javascript
深入理解js中的加载事件
Feb 08 #Javascript
You might like
php 过滤器实现代码
2010/08/09 PHP
thinkphp验证码显示不出来的解决方法
2014/03/29 PHP
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
PHP实现动态web服务器方法
2015/07/29 PHP
PHP 实现浏览记录并按日期分组
2017/05/11 PHP
PHP框架Laravel中实现supervisor执行异步进程的方法
2017/06/07 PHP
PHP经典设计模式之依赖注入定义与用法详解
2019/05/21 PHP
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
2010/12/03 Javascript
JS关键字变色实现思路及代码
2013/02/21 Javascript
javascript数组去重方法终极总结
2014/06/05 Javascript
对于jQuery性能的一些优化建议
2015/08/13 Javascript
jQuery中hover与mouseover和mouseout的区别分析
2015/12/24 Javascript
JS中使用正则表达式g模式和非g模式的区别
2017/04/01 Javascript
JS中的Replace()传入函数时的用法详解
2017/09/11 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
2017/10/28 jQuery
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
2020/04/12 Javascript
jQuery实现的两种简单弹窗效果示例
2018/04/18 jQuery
Vue 开发音乐播放器之歌手页右侧快速入口功能
2018/08/08 Javascript
Angular.JS读取数据库数据调用完整实例
2019/07/02 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
2020/02/05 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
2020/02/09 Javascript
[48:27]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Python Socket编程入门教程
2014/07/11 Python
Python迭代器定义与简单用法分析
2018/04/30 Python
django将网络中的图片,保存成model中的ImageField的实例
2019/08/07 Python
python爬虫增加访问量的方法
2019/08/22 Python
Python自动生成代码 使用tkinter图形化操作并生成代码框架
2019/09/18 Python
银行求职推荐信范文
2013/11/30 职场文书
酒店节能减排方案
2014/05/26 职场文书
预备党员自我批评思想汇报
2014/10/10 职场文书
中学生自我评价2015
2015/03/03 职场文书
离婚被告代理词
2015/05/23 职场文书
导盲犬小Q观后感
2015/06/11 职场文书
redis缓存存储Session原理机制
2021/11/20 Redis
通过T-SQL语句创建游标与实现数据库加解密功能
2022/03/16 SQL Server
如何通过简单的代码描述Angular父组件、子组件传值
2022/04/07 Javascript