Angular.JS实现无限级的联动菜单(使用demo)
前言
之前给大家介绍过一篇关于AngularJS中实现无限级联动菜单的文章，但没来得及和大家分享使用的示例，下面这篇文章就来给大家分享下几个使用的demo。
文中包括demo如下：
1.同步加载子选项demo
2.异步加载子选项demo
3.初始值回填demo
4.倒金字塔依赖demo
注意：在阅读本文前请先移步上一篇文章：https://www.nhooo.com/article/78126.htm
1.同步加载子选项
在各联动菜单加载之前，我们已经通过某种方式（比如后端渲染、api依赖、deferred依赖等等）拿到了渲染各级菜单所需的各种数据，我们只需要将该数据处理为
[{
text:'sometext',
value:'somevalue'
},]
的形式，并封装成数据源函数即可。以省-市联动为例：
html部分：
注意第二个select中声明了dependents="province"，以此实现联动
<selectmulti-level-selectsource="getProvinces"name="province"ng-model="form.province"empty="请选择省份"></select> <selectmulti-level-selectsource="getCities"name="city"ng-model="form.city"empty="请选择城市"dependents="province"></select>
controller部分：
预处理数据，提供数据源函数
controller('myCtrl',['$scope',function($scope){
//angular使用好习惯，将primitive值放到对象上
varform={};
$scope.form=form;
vardata=[{
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
}]
}];
varprovinces=[];
varcitiesLookup={};
//预处理，返回[{text:'sometext',value:'somevalue'},]的数据格式
$.each(data,function(index,province){
provinces.push({
text:province.name,
value:province.id
});
varcities=[];
$.each(province.cities,function(index,city){
cities.push({
text:city.name,
value:city.id
});
});
citiesLookup[province.id]=cities;
});
$scope.getProvinces=function(){
returnprovinces;
};
$scope.getCities=function(values){
returncitiesLookup[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值放到对象上
varform={};
$scope.form=form;
form.province=30;
form.city=301;
4.倒金子塔依赖
依赖声明是通过由逗号分割的字符串的形式完成的，使用上非常方便。
设想以下的场景：
教务处需要学生对课程进行评价，学生先选择周几，再选择时间，然后再选择具体的课程下拉框
周几和时间之间互不依赖，课程下拉框同时依赖于周几和时间，换言之，一旦周几和时间中的任意一个改变，课程下拉框就应该更新。
html部分：
注意第三个select的dependents属性是day,hour，即同时依赖于day和hour
<selectmulti-level-selectsource="getDays"name="day"ng-model="form.day"empty="请选择周几"></select> <selectmulti-level-selectsource="getHours"name="hour"ng-model="form.hour"empty="请选择时间"></select> <selectmulti-level-selectsource="getCourses"name="course"ng-model="form.course"empty="请选择课程"dependents="day,hour"></select>
controller部分：
和前面的例子类似，没有什么特殊的，预处理数据并提供数据源函数即可。
controller('myCtrl',function($scope){
varform={};
$scope.form=form;
$scope.getDays=function(){
vardays='一二三'.split('');
days.forEach(function(item,index){
days[index]={
text:'星期'+item,
value:'星期'+item
};
});
returndays;
};
$scope.getHours=function(){
return[{
text:'09:00-12:00',
value:'1'
},{
text:'14:00-17:00',
value:'2'
}];
};
varcourses={
'星期一':{
'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[];
}
returncourses[values.day][values.hour];
};
});
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。