In my model, I have a structure that resembles the following:
{
id: 1,
country: {
code: 'GB',
name: ''
}
}
While the country code is stored in the database, the name is missing. Another application requires the country name instead of the code... When editing this model, I provide users with a dropdown menu containing a list of countries with both code and name. I defined the ng-options attribute as follows:
ng-options="item.code as item.name for item in controller.countries"
This way, the country's name is pre-filled with the existing code. The problem arises when I attempt to set the name once a different country is selected. I attempted to achieve this using the following code:
ng-change="controller.setCodeAndName(controller.model.country, item)"
The corresponding method looks like this:
setCodeAndName: function (model, item) {
console.log(item);
model.code = item.value;
model.fullName = item.description;
},
However, I encountered an issue because item was undefined. This occurred because the currently selected item was not being passed to the method. Does anyone have a solution to ensure that a country can be pre-populated based on the code alone, and upon selection, the name is added to the object?