As a newcomer to angularjs, I am facing the challenge of saving the selected language from a dropdown menu in HTML to either local storage or cookies. This way, when a user navigates to another page, the language they previously chose will be loaded and used on the new page. Currently, whenever the page is changed or refreshed, the selected language disappears, requiring the user to select it again. I have utilized bower components for AngularJS and load translations from static files.
- This is my HTML code:
<div >
<section class="caret">
<h4>Select language for translation:</h4>
<select class="caret" ng-change="translate()" ng-model="selectedLanguage">
<option class="caret" value="en">English</option>
<option class="caret" value="no">Norsk</option>
</select>
</section>
<div>- My app
var app = angular.module('myApp', ['ngResource']);- My controller
app.controller('myController',['$scope', 'translationService',
function ($scope, translationService){
//Run translation if selected language changes
$scope.translate = function(){
translationService.getTranslation($scope, $scope.selectedLanguage);
};
//Init
$scope.selectedLanguage = 'en';
$scope.translate();
}]);- My translation service
app.service('translationService', function($resource) {
this.getTranslation = function($scope, language) {
var languageFilePath = 'translation_' + language + '.json';
console.log(languageFilePath);
$resource(languageFilePath).get(function (data) {
$scope.translation = data;
});
};
});Thank you.