Начать второе выпадающее меню на основе первого - 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

Ваш exportTypeFilter фильтр возвращается undefined значение. Когда он запускается в первый раз, аргумент selectedreport в фильтре передается как "" (пустая строка), из-за которого var output оценивает undefined.

ng-init="interactor.parameters.reportName = 'Cash Position Report'" Добавлено в первом select поле, чтобы исправить неполадку

Изменено скрипку: https://jsfiddle.net/nwn838yb/5/

Answer 2

Я изменил свой jsfiddle немного.

Посмотрите: https://jsfiddle.net/nwn838yb/1/

В принципе вы даже не нужен фильтр, чтобы достичь того, чего вы хотите. Вам нужна переменная, привязанная к области, в которой будет сохранен выбранный объект из первого выбора. Для этого я добавил $scope.selectedReport = {}; в свой объем.

Затем в вашем выборе вам необходимо пройти через $scope.reportOptions и сохранить выбор пользователя до selectedReport. Чтобы сделать это, вы просто определяете ng-model="selectedReport" - он сообщает, в какой переменной будет сохранен выбор пользователя и ng-options="report.reportName for report in reportOptions" - это говорит: «Пожалуйста, итерации через ReportOptions, для параметров просто показать имя_отчета, и если пользователь что-то выбирает, просто сохраните выбранный объект».

Для примера у пользователя выбрана "Cash Position". Этот объект будет храниться в selectedReport:

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

С помощью этого объекта, вы можете заполнить и перебирать selectedReport.format аналогично первому выбрать.