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

前言

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

文中包括demo如下：

1. 同步加载子选项demo

2. 异步加载子选项demo

3. 初始值回填demo

4. 倒金字塔依赖demo

注意：

在阅读本文前请先移步上一篇 文章

：

1. 同步加载子选项

在各联动菜单加载之前，我们已经通过某种方式（比如后端渲染、api依赖、deferred依赖等等）拿到了渲染各级菜单所需的各种数据，我们只需要将该数据处理为

rush:plain;"> [{ text: 'some text',value: 'some value' },]

的形式，并封装成数据源函数即可。以省-市联动为例：

html部分：

注意第二个select中声明了dependents="province" ，以此实现联动

rush:xhtml;">

controller部分：

预处理数据，提供数据源函数

rush:js;"> 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,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了，除了预处理（由使用者自己的业务逻辑负责）外，完全一样。

和上一个例子非常相似，只需要将两个数据源函数修改为：

rush:js;"> $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中为其赋值即可：

rush:js;"> // angular使用好习惯，将primitive值放到对象上 var form = {}; $scope.form = form; form.province = 30; form.city = 301;

4. 倒金子塔依赖

依赖声明是通过由逗号分割的字符串的形式完成的，使用上非常方便。

设想以下的场景：

教务处需要学生对课程进行评价，学生先选择周几，再选择时间，然后再选择具体的课程下拉框

周几和时间之间互不依赖，课程下拉框同时依赖于周几和时间，换言之，一旦周几和时间中的任意一个改变，课程下拉框就应该更新。

html部分：

注意第三个select的dependents属性是day,hour，即同时依赖于day和hour

rush:xhtml;">