根据第一个填充第二个下拉列表 - AngularJS答案

【问题标题】：Populate second dropdown based on first - AngularJS根据第一个填充第二个下拉列表 - AngularJS
【发布时间】：2016-09-07 07:10:58
【问题描述】：

我有两个select 盒子。第一个包含报告名称，第二个（应根据报告名称select 框动态填充）包含格式选项。

当我select 报告名称时，我想用相应的格式填充格式select 框。

我已经为数组中的报表定义了如下格式

$scope.reportOptions = [{
    "reportName": "Cash Position",
    "reportValue": "Cash Position Report",
    "formats": ["CSV", "PDF", "XLS"]
}, {
    "reportName": "Detail Report",
    "reportValue": "Detail Report",
    "formats": ["CSV", "PDF", "XLS"]
}, {
    "reportName": "Reconciliation Report",
    "reportValue": "Reconciliation Report",
    "formats": ["BAI", "CSV", "PDF", "QBO", "QFX", "XLS"]
}, {
    "reportName": "Summary Report",
    "reportValue": "Summary Report",
    "formats": ["BAI", "CSV", "PDF", "XLS"]
}, {
    "reportName": "Sweep Report",
    "reportValue": "Sweep Report",
    "formats": ["CSV", "PDF", "XLS"]
}, {
    "reportName": 'Custom Report Name',
    "reportValue": 'CustomReport',
    "formats": ["BAI", "CSV", "PDF", "QBO", "QFX", "XLS"]
}];

我的过滤器如下

.filter('exportTypeFilter', function() {
    return function(input, selectedreport, scope) {
        var selectedReportFormatOptions = [];
        var output = $.grep(scope.reportOptions, function(e) {
            return e["reportValue"] == selectedreport;
        });
        selectedReportFormatOptions = output[0]["formats"];
        return selectedReportFormatOptions;
    };
})

这些值未填充到select 框中。我做错了什么？

FULL EXAMPLE

【问题讨论】：

标签： angularjs angularjs-filter angularjs-ng-options

【解决方案1】：

我稍微修改了你的jsfiddle。

看看：https://jsfiddle.net/nwn838yb/1/

基本上你甚至不需要过滤器来实现你想要的。您需要一个与您的范围相关的变量，其中将存储第一次选择的选定对象。为此，我已将 $scope.selectedReport = {}; 添加到您的范围内。

然后，在您的选择中，您需要遍历$scope.reportOptions 并将用户选择保存到selectedReport。为此，您只需定义ng-model="selectedReport" - 它告诉将存储用户选择的变量和ng-options="report.reportName for report in reportOptions" - 这告诉“请遍历reportOptions，选项只需显示reportName，如果用户选择了某些东西，只需存储选定的对象” .

例如，用户选择了“现金头寸”。该对象将存储在selectedReport：

{
   "reportName":"Cash Position",
   "reportValue":"Cash Position Report",
   "formats":["CSV","PDF","XLS"]
}

使用此对象，您可以像第一次选择一样填充和迭代selectedReport.format。

【讨论】：

这很好，但是您能否为您的答案添加一些解释，而不仅仅是依靠 OP 来寻找小提琴。
您在报告select 框中的select option value 返回一个我不想要的object。我在reportOptions 中专门为option text 和option value 提供了两个不同的属性，分别为reportName 和reportValue。在这里查看您的价值：jsfiddle.net/Kunalh/nwn838yb/2
@Nishant123 您可以通过调用selectedReport.reportName 或selectedReport.reportValue 来获取您的值：jsfiddle.net/nwn838yb/3

【解决方案2】：

您的 exportTypeFilter 过滤器正在返回 undefined 值。当它第一次运行时，过滤器中的selectedreport 参数作为""（空字符串）传递，因此var output 的计算结果为undefined。

在第一个 select 框中添加了 ng-init="interactor.parameters.reportName = 'Cash Position Report'" 以解决问题

更新小提琴：https://jsfiddle.net/nwn838yb/5/

【讨论】：