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 相关文章推荐
JS 实现双色表格实现代码
Nov 24 Javascript
Extjs中DisplayField的日期或者数字格式化扩展
Sep 03 Javascript
Webkit的跨域安全问题说明
Sep 13 Javascript
jquery设置元素的readonly和disabled的写法
Sep 22 Javascript
js动态添加事件并可传参数示例代码
Oct 21 Javascript
javascript父、子页面交互技巧总结
Aug 08 Javascript
jQuery实现优雅的弹窗效果(6)
Feb 08 Javascript
vue.js实现含搜索的多种复选框(附源码)
Mar 23 Javascript
Vue仿手机qq的实例代码(demo)
Sep 08 Javascript
浅谈Redux中间件的实践
Jul 27 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
Oct 30 Javascript
vue print.js打印支持Echarts图表操作
Nov 13 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
多人战的战术与战略
2020/03/04 星际争霸
php写入数据到CSV文件的方法
2015/03/14 PHP
php抽奖概率算法(刮刮卡,大转盘)
2020/04/17 PHP
php+ajax实现异步上传文件或图片功能
2017/07/18 PHP
PHP+mysql防止SQL注入的方法小结
2019/04/27 PHP
JSON+HTML实现国家省市联动选择效果
2014/05/18 Javascript
3种Jquery限制文本框只能输入数字字母的方法
2014/12/03 Javascript
js实现向右横向滑出的二级菜单效果
2015/08/27 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
Vue.js实例方法之生命周期详解
2017/07/03 Javascript
集合Bootstrap自定义confirm提示效果
2017/09/19 Javascript
M2实现Nodejs项目自动部署的方法步骤
2019/05/05 NodeJs
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
基于jQuery实现挂号平台首页源码
2020/01/06 jQuery
antd-日历组件,前后禁止选择,只能选中间一部分的实例
2020/10/29 Javascript
[02:17]快乐加倍!DOTA2食人魔魔法师至宝+迎霜节活动上线
2019/12/22 DOTA
[01:10:24]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第一场 2月28日
2021/03/11 DOTA
详解Python程序与服务器连接的WSGI接口
2015/04/29 Python
Python抓取百度查询结果的方法
2015/07/08 Python
Python的Django框架安装全攻略
2015/07/15 Python
python虚拟环境的安装配置图文教程
2017/10/20 Python
python中copy()与deepcopy()的区别小结
2018/08/03 Python
python 实现UTC时间加减的方法
2018/12/31 Python
python判断文件是否存在,不存在就创建一个的实例
2019/02/18 Python
详解Django admin高级用法
2019/11/06 Python
pytorch模型预测结果与ndarray互转方式
2020/01/15 Python
python各层级目录下import方法代码实例
2020/01/20 Python
filter使用python3代码进行迭代元素的实例详解
2020/12/03 Python
HTML5输入框下拉菜单功能的示例代码
2020/09/08 HTML / CSS
味多美官网:蛋糕订购,100%使用天然奶油
2017/11/10 全球购物
优秀毕业大学生推荐信
2013/11/13 职场文书
企划主管岗位职责
2013/12/12 职场文书
租房协议书范本
2014/04/09 职场文书
企业理念标语
2014/06/09 职场文书
电力工程合作意向书
2015/05/11 职场文书
使用python生成大量数据写入es数据库并查询操作(2)
2022/09/23 Python