CODEWITHSUNDEEP
javascripthtmlangularjs
anoopelias
anoopelias

Reputation: 9548

AngularJS 1.x dependent dropdowns: third level not getting reset when changing first level

I have a three-level dependent dropdown built using AngularJS, as shown in this fiddle and in the following code.

<select ng-model="clock" ng-options="clock as clock.clockName for clock in dropdowns"></select>
<select ng-model="freq" ng-options="freq as freq.freq for freq in clock.freqs" ng-disabled="!clock"></select>
<select ng-model="rate" ng-options="rate as rate for rate in freq.rates" ng-disabled="!clock || !freq"></select>

The problem is that when I change the top level dropdown, it doesn't reset the third level dropdown. To replicate it, try selecting one value each in first second and third dropdowns. Then change the first dropdown, you can see that the second dropdown is reset, but the third is not.

Any suggestions?

Upvotes: 2

Views: 361

Answers (2)

Vineet
Vineet

Reputation: 4645

You should set null to last two model objects on change of the first select. Like that:

<select ng-model="clock" ng-options="clock as clock.clockName for clock in dropdowns" ng-change="freq=null; rate=null;"></select>

Fiddle

Upvotes: 1

Blackhole
Blackhole

Reputation: 20401

You've just discovered an old bug: the model wasn't updated if the selected option was removed.

This odd behaviour has been corrected by this commit, in AngularJS 1.4.0-beta.0. You can simply update your version of the framework to solve your problem.

Upvotes: 1

Related Questions