Dynamic dropdown select in AngularJS not working

Question

I am practicing with Angular and want to give users the option to choose from 3 dropdown select menus. The third menu should be dynamic depending on the selection from the previous two menus.

My html:

// First dropdown menu, static
<select ng-model="selectedLetter" ng-change="setColorSelection()" 
    ng-options="letter as letter for letter in letters">
</select>

<br>

// second dropdown menu, static
<select ng-model="selectedNumber" ng-change="setColorSelection()" 
    ng-options="number as number for number in numbers">
</select>

<br>

// third dropdown menu, should be dynamic
<select ng-model="selectedColor" 
    ng-options="color as color for color in colorSelection">
</select>

In my controller, I have the lists like this

$scope.letters = ['A', 'B'];
$scope.numbers = ['1', '2'];

var colors = {
    'A1': [{"red": "100"}, {"pink": "101"}],
    'A2': [{"blue": "202"}, {"black": "203"}],
    'B1': [{"yellow": "304"}, {"orange": "305"}],
    'B2': [{"white": "406"}, {"black": "407"}]
};

$scope.colorSelection = [];

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

So if the user selects 'A' from the first menu and '2' from the second menu, he should see the options for 'A2' in the third menu.

Problem: currently, the third menu is not populating.

When I do console.log($scope.colorSelection), I get [Object, Object] in the console instead of [{"blue": "202"}, {"black": "203"}].

Also, I only want to display the colors in the menu, not the numbers associated with them. I was able to do this in ng-repeat using (key, value), not sure how I would do this in ng-options.

byteC0de · Accepted Answer · 2016-03-31 04:22:39Z

3

Change your color object like

var colors = {
    'A1': [{"color": "Red", "code": "100"}, {"color":"pink", "code": "101"}]
};

and ng-option

<select ng-model="selectedColor" 
    ng-options="color.code as color.color for color in colorSelection">
</select>

answered Mar 31, 2016 at 4:22

byteC0de

5,3436 gold badges36 silver badges68 bronze badges

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

1 Comment

kevin_b Over a year ago

same issue, I get [Object, Object] in the console instead of [{"blue": "202"}, {"black": "203"}]

Stepan Kasyanenko · Accepted Answer · 2016-03-31 04:55:32Z

Dropdown working properly and correctly. The problem in your json object [{"red": "100"}, {"pink": "101"}].

Dropdown can be used as the source object, or an array.

All possible options dropdown use, see the documentation.

I think there are two ways to change your json:

Transform it into an array of objects.
Transform it into a single object with the keys.

First way:

var colors = {
 'A1': [{"color": "red", "code": "100"}, {"color":"pink", "code": "101"}]
};

Second way:

var colors = {
 'A1': {"red": "100","pink": "101"}
};

See example on jsfiddle;

angular.module('ExampleApp', [])
  .controller('ExampleController', function($scope) {
    $scope.letters = ['A', 'B'];
    $scope.numbers = ['1', '2'];

    var colorsByArray = {
      'A1': [{
        "color": "red",
        "code": "100"
      }, {
        "color": "pink",
        "code": "101"
      }]
    };
    var colorsByObject = {
      'A1': {
        "red": "100",
        "pink": "101"
      }
    };

    $scope.colorSelection = [];

    $scope.setColorSelection = function() {
      if ($scope.selectedLetter && $scope.selectedNumber) {
        $scope.colorSelectionByArray = colorsByArray[$scope.selectedLetter + $scope.selectedNumber];
        $scope.colorSelectionByObject = colorsByObject[$scope.selectedLetter + $scope.selectedNumber];
      }
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ExampleApp">
  <div ng-controller="ExampleController">
    Choose 'A'
    <select ng-model="selectedLetter" ng-change="setColorSelection()" ng-options="letter as letter for letter in letters">
    </select>
    <br>Choose '1'
    <select ng-model="selectedNumber" ng-change="setColorSelection()" ng-options="number as number for number in numbers">
    </select>

    <br>

    <h3>
    IterateByArray   
    </h3>
    <select ng-model="selectedColor" ng-options="color.code as color.color for color in colorSelectionByArray">
    </select>
    <h3>
    IterateByObject    
    </h3>
    <select ng-model="selectedColor" ng-options="v as k for (k, v) in colorSelectionByObject">
    </select>
  </div>
</div>

Collectives™ on Stack Overflow

Dynamic dropdown select in AngularJS not working

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related