How do you trigger the selection link based on the changed value in another choice?

advertisements

Let's say that I have list of countries and each country has a list of states/regions. So there are two selects. First to select country, and when country changes I want to trigger binding of the states select. How do you link these two controls to trigger binding of the states select when country changes?

<select id="countries"
data-ng-model="vm.permanentAddress.countryCode"
   data-ng-options="country.code for country in vm.form.countries">
  </select>

<select data-ng-model="vm.permanentAddress.stateCode"
    data-ng-options="state.value for state in vm.getStatesForCountry(vm.permamentAddress.countryCode)">
</select>

UPDATE: I was probably not explicit in my question as to what I want to do. I do not want to create any new properties that are then watched by angular for a change. I just want to tell anuglar, hey something has changed, go ahead and re-evaluate the binding for this control.

Is it not possible?


In your controller have something like this:

$scope.setStateOptions = function(country){

  $scope.stateOptions = /* whatever code you use to get the states */

}

Then your html can be:

<select id="countries"
   data-ng-model="vm.permanentAddress.countryCode"
   data-ng-options="country.code for country in vm.form.countries"
   data-ng-change="setStateOptions(country)">
  </select>

<select
    data-ng-model="vm.permanentAddress.stateCode"
    data-ng-options="state.value for state in stateOptions">
</select>