根据 Angular 中的另一个选择显示选项列表

Question

我有两个选择下拉列表，其中第二个选择中的选项取决于第一个选择中选择的选项。

目前我正试图弄清楚我应该以何种方式从服务器返回我的数据，这取决于我设置filter(s)的方式。

在使用多选下拉菜单过滤数据结构时，我希望能提供一些关于最佳实践的意见或建议。

以防万一这对我正在使用当前稳定版本的 AngularJS (v1.3.15) 开发/测试的人感兴趣。

数据结构 1 - 嵌套：

$scope.optionObjs = [
    {
        id: 1, name: 'option 1', desc: '',
        elements: [
            { id: 9, name: 'option 11', desc: '', },
            { id: 10, name: 'option 12', desc: '', },
            { id: 11, name: 'option 13', desc: '', },
            { id: 12, name: 'option 14', desc: '', },
            { id: 13, name: 'option 15', desc: '', },
        ],
    },
];

我希望在我的 html 中使用像以下示例一样的角度过滤器，但这似乎不起作用。

<select data-ng-model="firstSelect" data-ng-options="option.name for option in optionObjs"></select>

<select data-ng-model="secondSelect" data-ng-options="option.elements.name for option in optionObjs | filter:firstSelect"></select>

更新：

好吧，这对我来说太愚蠢了。 上述数据结构符合我的要求所需要的只是对第二个选择 html 的简单更改（不需要自定义过滤器功能）。

<select data-ng-model="firstSelect" data-ng-options="option.name for option in optionObjs"></select>

<select data-ng-model="secondSelect" data-ng-options="option.name for option in firstSelect.elements"></select>

就这些。 哎哟！！！

数据结构 2 - 带父引用：

$scope.optionObjs = [
    { id: 1, parent: null, name: 'option 1', desc: '', },
    { id: 9, parent: 1, name: 'option 11', desc: '', },
    { id: 10, parent: 1, name: 'option 12', desc: '', },
    { id: 11, parent: 1, name: 'option 13', desc: '', },
    { id: 12, parent: 1, name: 'option 14', desc: '', },
    { id: 13, parent: 1, name: 'option 15', desc: '', },
];

继续这个例子，我必须为第一个选择编写一个过滤器，以只显示那些没有父引用的选项。

<select data-ng-model="firstSelect" data-ng-options="option.name for option in optionObjs | filter:parent=null"></select>

<select data-ng-model="secondSelect" data-ng-options="option.elements.name for option in optionObjs | filter:firstSelect"></select>

更新：

考虑到@adamjld 的建议并使用Angular filter进行更多实验，我提出了以下 html 更新以配合上述数据结构（不需要自定义过滤器功能）。

<select data-ng-model="firstSelect" data-ng-options="option.name for option in optionObjs | filter : { parent: null, }"></select>

<select data-ng-model="secondSelect" data-ng-options="option.elements.name for option in optionObjs | filter : { parent: firstSelect.id, }"></select>

虽然这是一个更简单的解决方案，但在初始加载时存在一个小问题。 因为我没有将firstSelect初始化为控制器中的作用域对象，所以第二个选择框允许用户选择他们想要的任何选项。 但是，一旦在第一个选择框中选择了一个选项，第二个选择框选项就会被过滤，并且只显示与（父） firstSelect.id对应的选项。

参考

以防万一人们开始抱怨我根本没有使用搜索，这里有一些参考资料： angular filter
ng-repeat : 按单个字段过滤

Answer 1

我认为这将满足您的要求。我编辑了数据以显示它的工作效果更好。 我将您的数据拆分为两个数组，一个父项和一个子项。

$scope.parentOptionObjs = [{
        id: 1,
        name: 'option 1',
        desc: ''
    }, {
        id: 2,
        name: 'option 2',
        desc: ''
    }];

$scope.childOptionObjs = [{
        parent: 1,
        id: 9,
        name: 'option 11',
        desc: ''
    }, {
        parent: 1,
        id: 10,
        name: 'option 12',
        desc: ''
    }, {
        parent: 1,
        id: 11,
        name: 'option 13',
        desc: ''
    }, {
        parent: 2,
        id: 12,
        name: 'option 14',
        desc: ''
    }, {
        parent: 2,
        id: 13,
        name: 'option 15',
        desc: ''
    }];
});

现在使用以下过滤器按父项的 id 过滤子项。

app.filter('secondDropdown', function () {
    return function (secondSelect, firstSelect) {
        var filtered = [];
        if (firstSelect === null) {
            return filtered;
        }
        angular.forEach(secondSelect, function (s2) {
            if (s2.parent == firstSelect) {
                filtered.push(s2);
            }
        });
        return filtered;
    };
});

小提琴

Answer 2

在第一个下拉列表中设置ng-model ：

select ng-model="drp1Value"  

在第二个下拉列表中：

select ng-disabled= "drp1Value == null"