Can't change selected language when changing language in my application options (SOLVED)

ionic-v1
1

Hey everybody, i’m creating multi language application, the issue is, that when i’m coming to the options, i’m using variable to set default language in my select element, this is english language, i created a function to change languages, in this function i’m changing this variable to language that i’m choosing by id, when i’m clicking on back button, language is still what i’m chosen, but when i’m return to the options, in my select element anyway english although language is another, can’t understand why, i’m changing global variable in function, but anyway when i’m returning to the options always will be english as selected, this may sound difficult, so here is my code and screen:

OptionsCtrl:

      extractor.controller('OptionsCtrl', [
      '$scope',
      '$translate',
      '$rootScope',
  function($scope, $translate, $rootScope, $translateProvider) {


    $scope.languages =  [
      {id: 1, name: "English", value: 'en'},
      {id: 2, name: "Русский", value: 'ru'}
    ],
    $scope.selectedOption =  $scope.languages[0];
    

    $scope.changeLanguage = function(language) {
      $scope.id = language.id - 1;
      $translate.use(language.value);
      $scope.selectedOption =  $scope.languages[$scope.id];
      console.log($scope.id);
    }; // changeLanguage
}]);

This is my select element from options.html:

               <section>
			<label class="my-label">{{'languages' | translate}}</label>
			<div class="form-group">
			  <select class="form-control my-select" id="sel1" 
			  	ng-options="option.name for option in languages track by option.id"
  				ng-model="selectedOption" ng-change="changeLanguage(selectedOption)">
			  </select>
			</div>
		<section>

As you can see on screen, when i’m returning to the options, language is not english, but english looks like selected language.

image
issue.jpg540×960 52.7 KB

Can’t solve this problem few hours, I will be grateful for the help, thanks.

2

I solve this problem by using next files:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate-storage-local/2.7.2/angular-translate-storage-local.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-cookies.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate-storage-cookie/2.7.2/angular-translate-storage-cookie.min.js"></script>

then added ngCookies as dependencies in my module

then added $translateProvider.useLocalStorage(); to my $translateProvider config

and finally added simple if/else statement:

    if ($translate.use() == 'en') {
      $scope.selectedOption =  $scope.languages[0];
    } else if ($translate.use() == 'ru') {
      $scope.selectedOption =  $scope.languages[1];
    }

hope it will help somebody with the same problem.

3

looks like u passed to changeLanguage wrong data, its just the same data that u set on init - $scope.languages[0], that’s why it always stay the same.

4

Yeah, the problem was, that i set $scope.languages[0] by default, i could not check my current language to do this if/else statement, when i added this libraries now i can do this.