使用angular js根据第一个选择的选项过滤第二个选择框答案

【问题标题】：filter the second selectbox based on the first selected option using angular js使用angular js根据第一个选择的选项过滤第二个选择框
【发布时间】：2016-04-07 22:12:20
【问题描述】：

我有 2 个选择框，它们使用 ng-options 和硬编码获取数据。第二个选择框应显示基于第一个选择框中所选数据的数据。这是笨蛋。
https://plnkr.co/edit/r1S1e61H3RfH3uYGYTBP?p=preview
谁能帮帮我。

$scope.data = [{
        cities: [{
            id: 1,
            title: 'Mysore'
        }, {
            id: 2,
            title: 'Bangalore'
        }, {
            id: 3,
            title: 'Delhi'
        }, {
            id: 4,
            title: 'Mumbai'
        }],
        maps: [{
                id: 1,
                title: 'Zoo',
                city_id: 1
            }, {
                id: 2,
                title: 'Palace',
                city_id: 1
            }, {
                id: 3,
                title: 'Beach',
                city_id: 4
            }]

    }];

【问题讨论】：

plunker 有一些问题，例如“城市”下拉菜单不显示任何数据，并且在 HTML 文件中您将应用名称声明为 myApp，但在 JS 文件中其 plunker。
抱歉，plunker 已经更新了。请查看plnkr.co/edit/r1S1e61H3RfH3uYGYTBP?p=preview

标签： arrays angularjs select nested ng-options

【解决方案1】：

您可以将所选城市的 ID 从第一个下拉列表中作为过滤器传递给第二个下拉列表，如下所示

<select name="mapSelect" required="true" ng-options="map as map.title for map in data[0].maps | filter:{'city_id':citySelect.selectedOption.id}" ng-model="mapSelect.selectedOption"></select>

【讨论】：

我也有同样的疑问。此解决方案有效。谢谢。还有一个问题是如何在选择城市之前禁用地图
@Gautam - 请参考stackoverflow.com/questions/20514921/… 以启用/禁用下拉菜单。
还有一件事。我需要根据此处选择的城市绘制谷歌地图。你能告诉我怎么做吗
@ThilakRaj，我不太关心它:-(