Filter Two Dropdowns Based on One Another the Angular Way

Question

I've got two dropdowns. The allowable options in those dropdowns should be filtered based on what's in the other dropdown. Here's the first dropdown:

<select ng-model="filter.levelPregenerate">
  <option value="">All</option>
  <option value="assox">Associate's</option>
  <option value="bachx">Bachelor's</option>
  <option value="mastx">Master's</option>
  <option value="doctx">Doctorate</option>
  <option value="nondx">Non-Degree</option>
  <option value="bridx">Bridge</option>
</select>

And the second dropdown is an ng-repeat, as follows:

<select ng-model="filter.degreeTypePregenerate">
  <option value="">All</option>
  <option ng-repeat="type in degreeType | orderBy:'toString()'">{{type}}</option>
</select>

And here's the array being repeated above:

$scope.degreeType = ['BA', 'BS', 'MA', 'MBA', 
                     'MDIV', 'MED', 'MFA', 'MPH', 
                     'MS',' DNP', 'EDD', 'PHD', 
                     'EDSPL', 'GRDCERT'];

The options in the first and second dropdown should be filtered based on each other. Here's the mapping between the two (how the filter should work):

assox: '';
bachx: 'BA, BS';
mastx: 'MA, MBA, MDIV, MED, MFA, MPH, MS';
doctx: 'DNP, EDD, PHD';
nondx: 'EDSPL, GRDCERT';
bridx: ''

So, if 'BA' is selected in the second dropdown, 'bachx' should be the only option available in the first dropdown. Conversely, if 'doctx' is selected in the first dropdown, 'DNP', 'EDD', and 'PHD' should be the only select-able options in the second dropdown.

Here's a Codepen with the full code: http://codepen.io/trueScript/pen/LVZKEo

I don't think I can simply apply a basic '| filter:foo' to the second dropdown, because it wouldn't know how to filter it. What is the Angular way to do this?

this question sounds familiar .. did you try typing [angularjs] dropdown filter in the search box at the top of this page? hopefully, some relevant question/answers turn up. for example this SO Post — Shehryar Abbasi
– Shehryar Abbasi, Commented May 22, 2015 at 18:38
here's another SO Post about cascading drop down , do you think that you may have to format the stored data in $scope.degreeType to make mapping easier? ...e.g. [{'assoc':'BA'}, {'assoc':'BS'},..etc] as an array of objects — Shehryar Abbasi
– Shehryar Abbasi, Commented May 22, 2015 at 20:56

Daniel Hutton · Accepted Answer · 2015-05-22 21:08:37Z

2

You could set up a custom filter and return the values that should be displayed. Two ways of doing it:

Option 1 - If/else

angular.module('programApp', [
    'programApp.controllers',
    'programApp.filters'
]);

angular.module('programApp.filters', [])
.filter('dropdownFilter', function() {
    return function(input, degreeTypePregenerate) {

    if (degreeTypePregenerate === 'assox') {
      return [];
    } else if (degreeTypePregenerate === 'bachx') {
      return ['BA', 'BS'];
    }

    // and so on..

    }
});

Option 2 - An object (cleaner in my opinion)

angular.module('programApp.filters', [])
.filter('dropdownFilter', function() {
    return function(input, degreeTypePregenerate) {

        var degreeType = {
            'assox': [],
            'bachx': ['BA', 'BS']
        };

    return degreeType[degreeTypePregenerate];

    }
});

Finally, apply the filter to your ng-repeat, passing in the variable you want to filter by:

<option ng-repeat="type in degreeType | orderBy:'toString()' | dropdownFilter:filter.levelPregenerate">{{type}}</option>

Working codepen: Codepen

answered May 22, 2015 at 21:08

Daniel Hutton

1,4551 gold badge18 silver badges33 bronze badges

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

1 Comment

alloy Over a year ago

Very complete answer. Thank you!

Collectives™ on Stack Overflow

Filter Two Dropdowns Based on One Another the Angular Way

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related