Dynamic dropdown using ng-repeat in Angular

Question

My application gives users the option to choose from several dropdown menus and the third menu should be dynamic depending on the selection from the previous two menus.

I am using ng-repeat and ng-if to set the condition like this

// First dropdown menu
<select ng-model="letter" class = "form-control">
    <option ng-repeat= "letter in letters" value = "letter">{{letter}}</option>
</select>

<br>

// second dropdown menu
<select ng-model="number" class = "form-control">
    <option ng-repeat = "number in numbers" value = "number">{{number}}</option>
</select>

<br>

// third dropdown menu
<select ng-model="color" class="form-control">
    <option ng-repeat="A1_color in A1_colors" ng-if= "letter = A & number = 1" value="{{A1_color}}">{{A1_color}}</option>
</select>

...

<select ng-model="color" class="form-control">
    <option ng-repeat="B2_color in B2_colors" ng-if= "letter = B & number = 2" value="{{B2_color}}">{{B2_color}}</option>
</select>

In my controller, I have the lists like this

$scope.letters = {'A', 'B'};
$scope.numbers = {'1', '2'};

$scope.A1_colors = {'red', 'pink'};
$scope.A2_colors = {'blue', 'black'};
$scope.B1_colors = {'yellow', 'orange'};
$scope.B2_colors = {'white', 'black'};

So if the user selects 'A' from the first menu and '2' from the second menu, he should see the options for 'A2_colors' in the third menu. What is the right way to do this?

Surjeet Bhadauriya · Accepted Answer · 2016-03-28 06:21:34Z

3

I think, why to use ng-repeat for <select> tag when angular have another directive ng-options. You should use ng-options instead of ng-repeat. Never the less, you can also use ng-repeat, but it's not good way to do standard coding.

Syntax for ng-options:

 <select ng-model="item" 
         ng-options="item as item for item in collection">
 </select>

Your problem will solved by following code:

<div ng-app="MyApp" ng-controller="ctrl">
    <select ng-model="letter" 
            ng-options="letter as letter for letter in letters">
    </select>
    <select ng-model="number" 
            ng-options="number as number for number in numbers">
    </select>
    <select ng-model="color" 
            ng-options="color as color for color in colors">
    </select>
</div>

answered Mar 28, 2016 at 6:21

Surjeet Bhadauriya

7,2243 gold badges39 silver badges54 bronze badges

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

7 Comments

kevin_b Over a year ago

why is ng-options better than ng-repeat. Also can you show how to actually do dynamic dropdown based on previous dropdowns?

KP Chundawat Over a year ago

You can use ng-change. Create one function and call this function on ng-change and do rest in this function. I guess it make some sense.

Surjeet Bhadauriya Over a year ago

When angular have directive ng-options then why to go with indirect mechanism ng-repeat.

Lex Over a year ago

ng-options also allows you to use non-string value types.

kevin_b Over a year ago

@Lex can you explain what you meant by non-string value types, why cant ng-repeat do that

|

Lex · Accepted Answer · 2016-03-28 01:50:20Z

1

The "right way" is pretty subjective. Is this just a smaller example of what will be a larger collection of letters, numbers and colors? Here is one way you could approach it where you won't have to create a whole bunch of <select></select> elements that you show or hide.

JS:

angular.module('app', [])
    .controller('ctrl', function($scope) {
        $scope.letters = ['A', 'B'];
        $scope.numbers = ['1', '2'];
        var colors = {
            'A1': ['red', 'pink'],
            'A2': ['blue', 'black'],
            'B1': ['yellow', 'orange'],
            'B2': ['white', 'black']
        };

        $scope.colorSelection = [];

        $scope.setColorSelection = function() {
            if ($scope.selectedLetter && $scope.selectedNumber) {
                $scope.colorSelection = 
                    colors[$scope.selectedLetter + $scope.selectedNumber];
            }
        }
    });

HTML:

<div ng-app="app" ng-controller="ctrl">
    <select ng-model="selectedLetter" 
            ng-change="setColorSelection()" 
            ng-options="letter as letter for letter in letters">
    </select>
    <select ng-model="selectedNumber" 
            ng-change="setColorSelection()" 
            ng-options="number as number for number in numbers">
    </select>
    <select ng-model="selectedColor" 
            ng-if="colorSelection.length" 
            ng-options="color as color for color in colorSelection">
    </select>
</div>

edited Mar 28, 2016 at 1:50

answered Mar 28, 2016 at 1:38

Lex

7,2732 gold badges31 silver badges49 bronze badges

3 Comments

kevin_b Over a year ago

thank you! Yes it is a small example of a huge list of different colors and numbers and letters. My only concern with this approach is that it looks messy inside var colors[] because of how many items I have

kevin_b Over a year ago

can you explain how I would do it this way if I have a tuple inside the [] like so: 'A1': ['red' : 'dark', 'pink' : 'light']?

kevin_b Over a year ago

I have implemented your approach but the options are not displaying

Collectives™ on Stack Overflow

Dynamic dropdown using ng-repeat in Angular

2 Answers 2

7 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related