之前给大家介绍过一篇关于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" ng-model="form.province" empty="请选择省份"></select> <select multi-level-select source="getCities" 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" ng-model="form.day" empty="请选择周几"></select> <select multi-level-select source="getHours" ng-model="form.hour" empty="请选择时间"></select> <select multi-level-select source="getCourses" ng-model="form.course" empty="请选择课程" dependents="day,hour"></select>
controller部分：
和前面的例子类似，没有什么特殊的，预处理数据并提供数据源函数即可。