Question

首先，我对AngularJS很安静，我已经看到了级联下拉列表的几个实现，但它们没有按照我想要的方式运行和/或我不知道如何修改/扩展它们来做我想要的。

也许你可以指出我正确的方向或发布一个例子。我相信这对很多人都有用。

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

示例1：3个下拉列表。第一名是大学，第二名是大学，第三名是大学。

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

示例2：品牌（宝马，奥迪，梅赛德斯等），款式（可转换，轿车，小型货车等），价格范围（10k-20k，20k-30k，30k-50k等）

选择品牌时，请展示其款式和价格范围。选择样式时，显示已选择样式的品牌，并删除没有项目落在该范围内的价格范围。选择价格时，请显示属于该范围的品牌和款式。

Answer 1

这个链接有用吗？

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

级联下拉列表 - 多方向

1 个答案: