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/

基本上你甚至不需要过滤器来实现你想要的效果。您需要一个与您的范围相关联的变量，其中将存储来自第一个选择的选定对象。为此，我已将$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，类似于第一个选择。

Answer 2

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

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

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

填充基于第一个AngularJS的第二个下拉列表

2 个答案: