Nishant123 Nishant123 - 3 months ago 14
AngularJS Question

Populate second dropdown based on first - AngularJS

I have two

select
boxes. The first one contains report names and the second one (which should populate dynamically based on report name
select
box) contains format options.

I want to populate format
select
box with corresponding formats when I
select
report names.

I have defined formats for reports in an array as follows

$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"]
}];


My filter is as follows

.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;
};
})


The values are not getting populated into the
select
box. What wrong am I doing?

FULL EXAMPLE

Answer

Your exportTypeFilter filter is returning undefined value. When it runs for the first time the selectedreport argument in filter is passed as ""(empty string) due to which the var output evaluates to undefined.

Added ng-init="interactor.parameters.reportName = 'Cash Position Report'" in first select box to fix the problem

Updated fiddle : https://jsfiddle.net/nwn838yb/5/