AngularJS中实现无限级联动菜单(使用demo)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AngularJS中实现无限级联动菜单(使用demo)相关的知识,希望对你有一定的参考价值。

原文地址:http://www.cnblogs.com/front-end-ralph/p/5133122.html

昨天没来得及贴几个使用demo,今天补上,供有兴趣的同学参考 :)

1. 同步加载子选项demo
2. 异步加载子选项demo
3. 初始值回填demo
4. 倒金字塔依赖demo

directive的源代码请移步上一个帖子:
http://www.cnblogs.com/front-end-ralph/p/5131687.html

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];
    };
});

 
























以上是关于AngularJS中实现无限级联动菜单(使用demo)的主要内容,如果未能解决你的问题,请参考以下文章

Laravel 5.4 实现无限级分类

Excel 如何实现五级下拉菜单联动

js中实现无限层级的树形结构(类似递归)

AngularJs 如何实现多级联动且最后一级下拉可以选择多个选项。请附上正确例子

微搭低代码中实现数据的联动选择

vue中实现左右互联动