Search code examples
angularjsangularjs-filterangularjs-ng-options

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


Solution

  • 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/