级联下拉列表-多方向

Cascading Dropdown List - Multi Direction

本文关键字：方向 下拉列表 级联      更新时间：2023-09-26

首先，我对AngularJS非常陌生，我见过一些级联下拉列表的实现，但它们并没有按我想要的方式运行，或者我不知道如何修改/扩展它们来做我想要的。

也许你可以给我指出正确的方向或张贴一个例子。我相信它会对很多人有用。

所需功能:包含关系数据的多个下拉列表。在选定项目更改时，根据选择更新所有其他下拉列表。

例1:3个下拉列表。第一名是大学，第二名是专业，第三名是学位。

在大多数例子中，当选择大学时显示的是该大学的专业，而当选择专业时显示的是学位。我想要的是，当选择专业时，过滤学院或当从第三个下拉列表中选择博士时，删除所有没有博士课程的学院或任何没有博士学位的专业。

示例2:品牌(宝马、奥迪、奔驰等)、车型(敞篷车、轿车、小型货车等)、价格范围(10k-20k、20k-30k、30k-50k等)

当选择品牌时，显示其款式和价格范围。当选择Style时，显示已选择Style的品牌，并删除没有商品落在该范围内的价格范围。

显示在该范围内的品牌和款式。

这个链接有帮助吗?

http://jsfiddle.net/annavester/Zd6uX/

function AjaxCtrl($scope) {
    $scope.countries = ['usa', 'canada', 'mexico', 'france'];
    $scope.$watch('country', function(newVal) {
        if (newVal) $scope.cities = ['Los Angeles', 'San Francisco'];
    });
    $scope.$watch('city', function(newVal) {
        if (newVal) $scope.suburbs = ['SOMA', 'Richmond', 'Sunset'];
    });
}
function StaticCtrl($scope) {
    $scope.countries = {
        'usa': {
            'San Francisco': ['SOMA', 'Richmond', 'Sunset'],
            'Los Angeles': ['Burbank', 'Hollywood']
        },
        'canada': {
            'People dont live here': ['igloo', 'cave']
        }
    };
}

还有另一种方法使用ng-change attr:

https://stackoverflow.com/a/14386972/3202657

相关文章：