Populate second dropdown based on first - AngularJS

Question

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

Yan Ivan Evdokimov · Accepted Answer · 2016-09-07 07:29:54Z

2

I have modified your jsfiddle a bit.

Have a look: https://jsfiddle.net/nwn838yb/1/

Basically you even don't need a filter to achieve what you want. You need a variable tied to your scope in which selected object from the first select will be stored. For that I have added $scope.selectedReport = {}; to your scope.

Then, in your select you need to iterate through $scope.reportOptions and save user selection to selectedReport. To do this, you simply define ng-model="selectedReport" - it tells in which variable user selection will be stored and ng-options="report.reportName for report in reportOptions" - this tells "Please iterate through reportOptions, for options simply show reportName and if user selects something, just store selected object".

For example, user have selected "Cash Position". This object will be stored in selectedReport:

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

Using this object, you can populate and iterate through selectedReport.format similarly to the first select.

edited Sep 7, 2016 at 7:29

answered Sep 7, 2016 at 7:20

Yan Ivan Evdokimov

1791 gold badge4 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ankh Over a year ago

This is great, but could you add some explanation to your answer and not just rely on OP scouring the fiddle.

Nishant123 Over a year ago

Your select option value in report select box returns an object which I don't want. I have specifically given two different properties in reportOptions for the option text and option value as reportName and reportValue. Look at your value here: jsfiddle.net/Kunalh/nwn838yb/2

Yan Ivan Evdokimov Over a year ago

@Nishant123 you can simply get your values by calling selectedReport.reportName or selectedReport.reportValue: jsfiddle.net/nwn838yb/3

user3433164 · Accepted Answer · 2016-09-08 11:33:33Z

0

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/

answered Sep 8, 2016 at 11:33

user3433164

1003 silver badges14 bronze badges

Collectives™ on Stack Overflow

Populate second dropdown based on first - AngularJS

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related