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

前言
之前给大家介绍过一篇关于AngularJS中实现无限级联动菜单的文章，但没来得及和大家分享使用的示例，下面这篇文章就来给大家分享下几个使用的demo。
文中包括demo如下：
1. 同步加载子选项demo

2. 异步加载子选项demo

3. 初始值回填demo

4. 倒金字塔依赖demo
注意：在阅读本文前请先移步上一篇文章：http://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]; };}）;

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