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

Question

我有两个 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

Answer 1

我稍微修改了你的jsfiddle。

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

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

然后，在您的 select 中，您需要遍历 $scope.reportOptions 并将用户 selection 保存到 selectedReport。为此，您只需定义 ng-model="selectedReport" - 它告诉用户 selection 将存储在哪个变量中，以及 ng-options="report.reportName for report in reportOptions" - 这告诉 "Please iterate through reportOptions, for options simply show reportName and if user selects something, just store selected object".

例如，用户select编辑了"Cash Position"。此对象将存储在 selectedReport:

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

使用此对象，您可以像第一个 select.

一样填充和迭代 selectedReport.format

Answer 2

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

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

已更新 fiddle：https://jsfiddle.net/nwn838yb/5/

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

Populate second dropdown based on first - AngularJS

angularjs

angularjs-filter

angularjs-ng-options