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

前言

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

文中包括demo如下：

1. 同步加载子选项demo

2. 异步加载子选项demo

3. 初始值回填demo

4. 倒金字塔依赖demo

注意：在阅读本文前请先移步上一篇文章：https://www./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];
 };
});

总结

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

# angularjs # 无限级菜单 # 联动菜单 # angular # AngularJS实现树形结构(ztree)菜单示例代码 # 实例详解AngularJS实现无限级联动菜单 # AngularJS折叠菜单实现方法示例 # AngularJS实现的select二级联动下拉菜单功能示例 # Angular.js与Bootstrap相结合实现手风琴菜单代码 # AngularJS动态菜单操作指令 # AngularJS+Bootstrap3多级导航菜单的实现代码 # AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息) # angularjs+bootstrap菜单的使用示例代码 # Angluar+zorro实现无限级菜单 # 请选择 # 加载 # 自己的 # 只需 # 给大家 # 这篇文章 # 下拉框 # 几个 # 在这里 # 古汉语 # 烟台 # 佛山 # 依赖于 # 要在 # 所需 # 没有什么 # 请先 # 上一 # 要做 # 济南

返回目录在线咨询

上一篇：主机控制面板建站：数据库创建、连接及备份操作指南
下一篇：如何使用Golang template生成动态文本_结合HTML模板渲染内容

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求