md-select 使用 i18n 初始化

md-select initialization with i18n

我正在使用 Angular-material 和 I18next。这是我的简单示例:

<md-select ng-init="val='en'" ng-model="val">
    <md-option ng-value="en">{{'en' | i18next}}</md-option>
    <md-option ng-value="de">{{'de' | i18next}}</md-option>
</md-select>

select 标题用 'en' 初始化,而不是 'English'。但是,一旦我 select 另一个值,正确的国际化值就会显示为新的 select 标题。

知道如何让 select 元素显示其初始化时的国际化值吗?

谢谢, 最大值

N.B。如果我直接使用 'English' 或与选项中的值不同的任何其他值进行初始化,则 select 元素根本不会被初始化。

更新:看起来 md-select 元素标题在 md-option 元素内部值国际化之前被初始化。我不知道如何解决这个问题。

这是您所指的旧 angular-material.js 中的错误 Github Issue 并且已在较新版本中解决。

尝试将您的 angular-material.js 更新到最新版本(版本 1.3.6)将 select 值正确。

HTML

<md-select ng-init="val='en'" ng-model="val">
    <md-option ng-value="en">{{'en' | i18next}}</md-option>
    <md-option ng-value="de">{{'de' | i18next}}</md-option>
</md-select>

Working Plunkr

更新

为了使用 i18next 过滤器下拉预 selected 值,您需要设置 useLocalStorage 选项设置为 true 以保留所有文件,例如 ``useLocalStorage: true,`

配置

app.config(['$i18nextProvider',
  function($i18nextProvider) {
    $i18nextProvider.options = {
      fallbackLng: 'en',
      useCookie: true,
      useLocalStorage: true, //set to true
      resGetPath: 'i18n-__lng__.json',
      lngWhitelist: ['en', 'de'],
      preload: ['en', 'de']
    };
  }
]);

Updated Plunkr

希望对您有所帮助,谢谢。