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 相关文章推荐
ExtJs扩展之GroupPropertyGrid代码
Mar 05 Javascript
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
Jun 11 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
Oct 01 Javascript
浅谈Javascript数组(推荐)
May 17 Javascript
web打印小结
Jan 11 Javascript
React Native之ListView实现九宫格效果的示例
Aug 02 Javascript
详解React Native顶|底部导航使用小技巧
Sep 14 Javascript
使用D3.js+Vue实现一个简单的柱形图
Aug 05 Javascript
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
Vue项目中最新用到的一些实用小技巧
Nov 06 Javascript
Vue3.0 响应式系统源码逐行分析讲解
Oct 14 Javascript
JavaScript 作用域scope简单汇总
Oct 23 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
解决控件遮挡问题:关于有窗口元素和无窗口元素
2007/01/28 PHP
yii上传文件或图片实例
2014/04/01 PHP
ThinkPHP处理Ajax返回的方法
2014/11/22 PHP
PHP多维数组转一维数组的简单实现方法
2015/12/23 PHP
利用laravel+ajax实现文件上传功能方法示例
2017/08/13 PHP
js 实现复制到粘贴板的功能代码
2010/05/13 Javascript
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
2010/05/13 Javascript
jquery下组织javascript代码(js函数化)
2010/08/25 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
2012/01/04 Javascript
jQuery.getScript加载同域JS的代码
2012/02/13 Javascript
jQuery学习笔记 获取jQuery对象
2012/09/19 Javascript
5分钟理解JavaScript中this用法分享
2013/11/09 Javascript
jquery选择器之基本过滤选择器详解
2014/01/27 Javascript
js读取json的两种常用方法示例介绍
2014/10/19 Javascript
jquery实现标题字体变换的滑动门菜单效果
2015/09/07 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
2016/12/26 Javascript
node.js基于mongodb的搜索分页示例
2017/01/22 Javascript
jQuery实现简单的滑动导航代码(移动端)
2017/05/22 jQuery
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
浅谈React Native Flexbox布局(小结)
2018/01/08 Javascript
nodejs acl的用户权限管理详解
2018/03/14 NodeJs
vue elementui 实现搜索栏公共组件封装的实例代码
2020/01/20 Javascript
详解Python程序与服务器连接的WSGI接口
2015/04/29 Python
python 实现自动远程登陆scp文件实例代码
2017/03/13 Python
Python使用struct处理二进制(pack和unpack用法)
2020/11/12 Python
全球最大最受欢迎的旅游社区:Tripadvisor
2017/11/03 全球购物
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
护理专业推荐信
2013/11/07 职场文书
幼儿园庆六一活动方案
2014/03/06 职场文书
安全教育演讲稿
2014/05/09 职场文书
食品安全处置方案
2014/06/14 职场文书
学校安全工作汇报材料
2014/08/16 职场文书
房屋质量投诉书
2015/07/02 职场文书
人代会简报
2015/07/21 职场文书
反邪教学习心得体会
2016/01/15 职场文书
java executor包参数处理功能 
2022/02/15 Java/Android