Angularjs filtering values on two dropdowns

Question

I've a quick issue that I can't handle.

I've a data for a dropdown, and depending on the value that's being picked for that dropdown, I want the data to change on the second dropdown, also preferably if it's hidden until the first dropdown is picked.

Atm, I can pick the first controller but I don't have an idea on how to connect the two dropdowns.

Any help will be greatly appreciated. Thank you in advance

new test service

export default class newtest {
    constructor($http){
        'ngInject';

        this._$http = $http;
        let testData = this;


        this.options = {
            releases: [
                {value: 1, name: 'R1', environments : ['R1-QA1', 'R1-QA2']},
                {value: 2, name: 'R2', environments : ['R2-QA1', 'R2-QA2']},
                {value: 3, name: 'R3', environments : ['R3-QA1', 'R3-QA2']}
            ],
            environments : [
            ['R1-QA1', 'R1-QA2'],
            ['R2-QA1', 'R2-QA2'],
            ['R3-QA1', 'R3-QA2']
            ]
        };
    }
}

new test controller

class NewTestCtrl {
  constructor(NewTest, $state, $http) {
    'ngInject';

    this._NewTest = NewTest;
    this.options = this._NewTest.options;


    this.releaseValues = this.options.releases.name;
    this.envValues = [];
    }

HTML

        <fieldset>
          <select ng-model="release" ng-options="release.name for release in $ctrl.options.releases">
            <option value="" disabled selected>Select</option>
            <option value="value">{{name}}</option>
          </select>
        </fieldset>

        <fieldset>
          <select ng-model="release" ng-options="env for environments in $ctrl.options.environments">
            <option value="" disabled selected>Select</option>
            <option value="env">{{env}}</option>
          </select>
        </fieldset>

Jim Moore · Accepted Answer · 2017-01-30 13:41:47Z

1

First, both your select elements have ng-model="release". This is the data field it is bound to in your controller. The second select element should be something like ng-model="environment".

You should be able to make the environment list change based on the the release selected by having the options use the release data element, something like ng-options="env for environments in $ctrl.options.releases[release].environments"

Lastly, you could hide the environment select until a release is selected with a ng-Show attribute based on release having a value. Something like ng-Show="release>0" and initialize release to 0 in your constructor.

answered Jan 30, 2017 at 13:41

Jim Moore

1311 silver badge6 bronze badges

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

4 Comments

Nick Ko Over a year ago

Hey Jim, thanks for the reply, i dont get the $ctrl.options.releases[release].environments, the brackets around release, what are they suppose to be doing?

Jim Moore Over a year ago

Selecting the element within the releases array that the user selected. ng-model="release" on your first select puts the value of the selected element in a variable named release. Then you can use this variable to select the corresponding child environments array.

Nick Ko Over a year ago

That concept is fantastic, but can't seem to be able to make it work. I changed the second drop down to this > <fieldset> <select ng-model="environment" ng-options="env for environments in $ctrl.options.releases[release].environments"> <option value="" disabled selected>Select</option> <option value="value">{{env}}</option> </select> </fieldset>

Jim Moore Over a year ago

It may need to be $ctrl.options.releases[$ctrl.release].environments. Without the full code, can't test it.

Nick Ko · Accepted Answer · 2017-01-30 16:41:25Z

Thanks for the help @Jim Moore, I found a good fiddle link that I followed for guidelines https://jsfiddle.net/annavester/Zd6uX/

And I changed the json of my data to >

        environments : {
            'Release 1' : ['R1-QA1', 'R1-QA2'],
            'Release 2' : ['R2-QA1', 'R2-QA2'],
            'Release 3' : ['R3-QA1', 'R3-QA2']
        }

and also the html to, For anyone going through the same issue in the future, I hope this helps.

        <fieldset>
          <select id="release"
                  ng-model="$ctrl.release"
                  ng-hide="!$ctrl.browsers"
                  ng-options="release for (release, environments) in $ctrl.environments">
            <option value="" disabled selected>Select</option>
          </select>
        </fieldset>


        <fieldset>
          <select id="environment"
                  ng-model="$ctrl.environment"
                  ng-hide="!$ctrl.release"
                  ng-options="environment for (release, environment) in $ctrl.release">
            <option value="" disabled selected>Select</option>
          </select>
        </fieldset>

Collectives™ on Stack Overflow

Angularjs filtering values on two dropdowns

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related