CODEWITHSUNDEEP
angularjsi18nextangular-material
Max
Max

Reputation: 708

md-select initialization with i18n

I'm using Angular-material and I18next. Here is my simple example :

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

The select title is initialized with 'en' and not 'English'. But as soon as I select an other value the correct internationnalized value appears as the new select title.

Any idea how to get the select element displaying the internationnalized value from its initialization ?

Thanks, Max

N.B. if I initializes directly with 'English' or any other value different than the values in the options, the select element does not get initialized at all.

Update: It looks like the md-select element title is initialized before the md-option elements inner values are internationnalized. I have no idea how to solve this.

Upvotes: 2

Views: 1920

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136154

That was bug in older angular-material.js which you were referring Github Issue & It has been resolved in newer version.

Try updating Your angular-material.js to latest(ver. 1.3.6) will select the value properly.

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

Update

In order work drop down pre-selected value with i18next filter you need to set useLocalStorage option to true to preserve all files like ``useLocalStorage: true,`

Config

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

Hopefully this would help you, Thanks.

Upvotes: 1

Related Questions