I am relatively new to Angular, and I'm struggling to figure out what's causing this issue.
Currently, I have a message that can be translated using a button, and everything is functioning correctly. As shown in the image, there is a list of languages in a select dropdown. The logged-in user has a default language setting which can be Dutch, English, or French (these are the standard languages used for the app's text). Additionally, the select dropdown contains more languages for message translation, all of which are working properly. However, the problem arises when the page loads as I want the selected option in the dropdown to match the user's default language. Instead of automatically selecting the correct language (for example, English), it remains at an empty line at the top of the select with no description. Even though the code behind it shows 'EN' as the id, indicating that it receives the value on load, it still does not select the right line. Upon inspecting the HTML, other values appear like 'STRING:EN', 'STRING:AM', etc.
I suspect the issue may stem from using a string as the ID, causing it to create a new one without any description if it thinks the IDs are different. I am unsure about this analysis. I've attempted manually setting the default option but had no success.
Here is the image that displays the listbox with the translate button.
The HTML page:
<select id="languageListbox" name="LanguageSelect" style="width: 140px;"
ng-show="UI.message.iCanReply(messagedetail) && (!UI.message.actionsAreVisible(messagedetail) || UI.message.performActionsVisibleBecauseOfSize)"
tabindex="0" aria-multiselectable="false"
aria-expanded="false" role="listbox"
ng-options="language.id as language.description for language in languages"
ng-model="selectedLanguage"
ng-init="selectedLanguage.id = userLanguage">
</select>
The controller: (relevant sections only)
$scope.languages = myLanguages.translateLanguages;
...
function init() {
...
$scope.userLanguage = $sessionStorage.user.DefaultLanguage;
...
}
The resource file:
app.constant("myLanguages", {
"languages": [
{ id: 'NL', description: 'Dutch' },
{ id: 'EN', description: 'English' },
{ id: 'FR', description: 'French' }
],
"translateLanguages": [
{ id: 'AF', description: 'Afrikaans' },
{ id: 'SQ', description: 'Albanian' },
...
{ id: 'NL', description: 'Dutch' },
{ id: 'EN', description: 'English' },
...
]
});