kevin_b
kevin_b

Reputation: 863

Dynamic dropdown using ng-repeat in Angular

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?

Upvotes: 0

Views: 10749

Answers (2)

Surjeet Bhadauriya
Surjeet Bhadauriya

Reputation: 7156

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>

Upvotes: 3

Lex
Lex

Reputation: 7194

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>

Upvotes: 1

Related Questions