带有ng-change的angularjs ng-option

Question

I have this model that looks something like this:

{
    id: 1,
    country: {
        code: 'GB',
        name: ''
    }
}

The country code is stored in the database, but the name is not. However, there is another application that requires the country name rather than the code.... So, when editing this model I have a dropdown that has a list of countries that has both code and name . I set the ng-options up like this:

ng-options="item.code as item.name for item in controller.countries"

I did this so that the country would be pre-populated with my current code. The issue is, I want to set the name when someone chooses a different country. I tried doing it like this:

 ng-change="controller.setCodeAndName(controller.model.country, item)"

and the method just looks like this:

setCodeAndName: function (model, item) {
    console.log(item);
    model.code = item.value;
    model.fullName = item.description;
},

However, this does not work because item is undefined. I know this is because item (which is supposed to be the current selected item) has not been passed to the method. Does anyone know of a way to fix my issue so that a country is pre-populated based on the code alone and when it changes it will add the name to the object?

Answer 1

You also need an ngModel on that select - I'd also recommend just using the entire object as the model assignment - so your select ends up looking like:

<select
    ng-model="selectedItem"
    ng-options="item as item.name for item in controller.countries"
    ng-change="controller.setCodeAndName(selectedItem)"
</select>

And your method:

setCodeAndName: function (item) {
    console.log(item);
    model.code = item.value;
    model.fullName = item.description;
},