CODEWITHSUNDEEP
angularjs
user3232314
user3232314

Reputation: 13

Populate dropdown based on another, second one still remembers old selection

I have an unwanted behavior: The second dropdown remembers the old item? Why?

http://jsfiddle.net/Xku9z/ (fiddle borrowed from another thread)

Scenario:

I have no clue how to resolve this, I've been using $scope.$watch on the ng-model="option2" just to get a grip on the problem without success.

Also, by setting option2 = null in the data-ng-change="getOptions2()" wont help:

$scope.getOptions2 = function(){
  $scope.option2 = null;
};

Any ideas? Thanks

Upvotes: 1

Views: 2580

Answers (1)

Michał Miszczyszyn
Michał Miszczyszyn

Reputation: 12701

The behaviour you're experiencing is easier to understand if you watch the $scope.option2 value.

When you change the first dropdown you actually don't modify the $scope.option2 value. It stays the same: it's remembered. To make it work like you want just add one line

$scope.option2 = null;

at end of getOptions2 function. That's it. If you want more explanation of the current behaviour, read on.

Why does the second select go blank when I change the first one if the value is remembered?

<select> elements will show a selected value if and only if the value of ng-model can be found in the array bound to this element with ng-options.

Select first items from both dropdowns. Now:

$scope.option2 = "option2 - 1-1";
$scope.options2 = ["option2 - 1-1","option2 - 1-2","option2 - 1-3"];

As you can see the first variable can be found in the array so the value is displayed as currently selected. Now change only the first dropdown to the second item:

$scope.option2 = "option2 - 1-1";
$scope.options2 = ["option2 - 2-1","option2 - 2-2","option2 - 2-3"];

As you can see, $scope.option2 is not changed, but it's no longer in the $scope.options2 array. Therefore its value is not displayer as currently selected.

Upvotes: 2

Related Questions