蝙蝠岛资源网

Angular.JS实现无限级的联动菜单(使用demo)
网络编程 2025/10/31 佚名
2 0
蝙蝠岛资源网 Design By www.hbtsch.com

前言

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

文中包括demo如下：

1. 同步加载子选项demo

2. 异步加载子选项demo

3. 初始值回填demo

4. 倒金字塔依赖demo

注意：在阅读本文前请先移步上一篇文章：https://www.jb51.net/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,无限级菜单,angularjs,联动菜单,angular,联动菜单
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com

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

暂无Angular.JS实现无限级的联动菜单(使用demo)的评论...
www.hbtsch.com 蝙蝠岛资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 MicroAirGrinder 南强小屋 幽灵资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 HerbalExtract 蝙蝠岛资源网 白云城资源网 天枫庄资源网 无争山庄资源网 HerbalExtracts FoodColouring NaturalHerbal HerbalOnline NaturalColouring 更多链接
蝙蝠岛资源网 Design By www.hbtsch.com