【问题标题】:In my select, I can't set the default option on the value i want在我的选择中,我无法在我想要的值上设置默认选项
【发布时间】:2020-04-03 09:40:35
【问题描述】:

我是 Angular 的新手,但我不知道还有什么可以尝试解决这个问题。

我有一条消息,我可以用一个按钮翻译。这一切都正常工作。就像您在图像中看到的那样,选择中有一个语言列表。 登录的用户具有用户语言设置。这是荷兰语、英语或法语。 (对于应用程序的一般翻译,只有 3 种语言。这些语言用于应用程序的标准文本。) 在选择中有更多的语言,用于消息的翻译。一切正常,包括翻译。

我遇到的问题是,当页面加载时,我希望所选选项成为用户的默认语言。但是,它没有选择(在我的示例中为英语),而是停留在选择顶部的空行中,并带有一个空的描述。当我测试这后面的代码时,它说它的 id 是“EN”,这意味着他实际上在加载时收到了值,但由于某种原因它没有选择正确的行。但是当我查看 html 时,其他值都是这样的 'STRING:EN', 'STRING:AM', ...

我相信这是因为我使用一个字符串作为 id,它认为 id 不一样,所以它创建了一个没有描述的新字符串。我不确定这些。我也尝试过手动设置默认选项,但也没有用。

Listbox with translate button这是图片

html页面:

<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>

控制器:(仅部分)

 $scope.languages = myLanguages.translateLanguages;
 ...
 function init() {
    ...
    $scope.userLanguage = $sessionStorage.user.DefaultLanguage;
    ...
    }

资源文件:

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' },
    ...
]
});

【问题讨论】:

    标签: angularjs select


    【解决方案1】:

    在您的 ng-options 中尝试添加 track by language.id

    我认为您的 ng-model 是一个对象(而不是语言 ID),您需要使用语法跟踪来帮助 AngularJS 唯一地识别集合中的每个项目

    https://docs.angularjs.org/api/ng/directive/ngRepeat#tracking-and-duplicates

    【讨论】:

    • 成功了,谢谢。后面的代码有问题,但我解决了。当用户默认语言为法语时,列表框为法语,但我们仍然可以根据需要更改翻译语言。现在唯一的问题是,当我更改语言时,描述为空,但只有第一次,我可以再次更改它然后显示。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-01-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-08-12
    • 1970-01-01
    相关资源
    最近更新 更多