<强>前言
之前给大家介绍过一篇关于AngularJS中实现无限级联动菜单的文章,但没来得及和大家分享使用的示例,下面这篇文章就来给大家分享下几个使用的演示。
<>强文中包括演示如下:
1。同步加载子选项演示
2。异步加载子选项演示
3。初始值回填演示
4。倒金字塔依赖演示
<强>在阅读本文前请先移步上一篇文章:https://www.jb51.net/article/78126.htm
<强> 1。同步加载子选项
在各联动菜单加载之前,我们已经通过某种方式(比如后端渲染,api依赖,延迟依赖等等)拿到了渲染各级菜单所需的各种数据,我们只需要将该数据处理为
[{
文字:“一些文本”,
价值:“值”
},]
的形式,并封装成数据源函数即可。以省-市联动为例:
html部分:
注意第二个选择中声明了<代码>家属=>
& lt;选择multi-level-select源=" getProvinces " name=笆 眓g-model="的形式。省“空="请选择省份“祝辞& lt;/select>
& lt;选择multi-level-select源=" getCities " name="城市" ng-model="的形式。城市“空="请选择城市省“家属=祝辞& lt;/select>
控制器部分:
预处理数据,提供数据源函数
控制器(“myCtrl”,“美元范围”,函数(范围美元){//角使用好习惯,将原始值放到对象上
var形式={};
美元的范围。形式=形式;
var data=https://www.yisu.com/zixun/[{
名称:“浙江”,
id: 10
城市:[{
名称:“杭州”,
id: 100
},{
名称:“宁波”,
id: 101
},{
名称:“温州”,
id: 102
})
},{
名称:“广东”,
id: 20,
城市:[{
名称:“广州”,
id: 200
},{
名称:“深圳”,
id: 201
},{
名称:“佛山”,
id: 202
})
},{
名称:“山东”,
id: 30,
城市:[{
名称:“济南”,
id: 301
},{
名称:“青岛”,
id: 302
},{
名称:“烟台”,
id: 303
})
});
var省份=[];
var citiesLookup={};//预处理,返回[{文本:“一些文本”,价值:“值”},]的数据格式
美元。每个(数据、函数(指数、省){
provinces.push ({
文本:province.name,
价值:province.id
});
var城市=[];
美元each(省。城市,函数(指数、城市){
cities.push ({
文本:city.name,
价值:city.id
});
});
citiesLookup[省。id]=城市;
});
美元的范围。getProvinces=function () {
返回省;
};
美元的范围。getCities=function(值){
返回citiesLookup[值。省)| | [];
};
}));
<强> 2。异步加载子选项演示
主要差异是数据源函数应该返回承诺实例(AngularJS中使用问即美元可)。为了演示方便,这里就不用http了美元,除了预处理(由使用者自己的业务逻辑负责)外,完全一样。
和上一个例子非常相似,只需要将两个数据源函数修改为:
美元的范围。getProvinces=function () {
返回$ q(函数(解决){//异步时应返回承诺,这里就不用http了,除了预处理(由使用者自己的业务逻辑负责)外,完全一样//如果需要缓存,也请在这里自己负责
美元超时(函数(){
解决(省);
}, 100);
});
};
美元的范围。getCities=function(值){
返回$ q(函数(解决){
美元超时(函数(){
解决(citiesLookup[值。省)| | []);
}, 100);
});
};
<强> 3。初始值回填
因为在开发初期这个需求就很明确了,所以使用上不需要做额外的工作,如果有初始值,只需要在控制器中为其赋值即可:
//角使用好习惯,将原始值放到对象上
var形式={};
美元的范围。形式=形式;
的形式。?30;
的形式。城市=301;
<强> 4。倒金子塔依赖
依赖声明是通过由逗号分割的字符串的形式完成的,使用上非常方便。
