2016-06-22 2 views
0

Я пытаюсь обновить значение входного диапазона в Angular, используя localStorage.Обновить значение диапазона, используя localStorage Angular

Это то, что я в моем HTML:

input type="range" id="myRange" value={{audio.volume}} min="0" max="1" step="0.01" ng-model="audio.volume" ng-change="adjustVolume()" 

Я хочу, чтобы значение диапазона быть динамичным.

И это мои ЯШИ:

$scope.adjustVolume = function(){ 
    localStorageService.set("volume",$scope.audio.volume); 
} 

Таким образом, мне удалось сохранить ключ «громкость» в localStorage, но если я обновить страницу положение ползунка диапазона возвращается на 1, даже если localStorage по-прежнему установлен на какое-то другое число.

Как сохранить значение диапазона так же, как значение от localStorage, а также положение диапазона.

+0

Что такое $ scope.audio.volume, первоначально установленный в вашем контроллере? Вероятно, вы не определяете его на основе значения локального хранилища при загрузке контроллера. – developthewebz

+0

на странице загрузки я эту проверку \t если (localStorageService.get ("объем") == NULL) { \t \t localStorageService.set ("объем", "1");} \t еще { \t localStorageService.set ("объем", $ scope.audio.volume); \t} потому что я хочу, если объем ключа в localStorage не существует, значение диапазона будет 1, а если оно уже существует для значения localStorage. –

+0

Если это ваш фактический код, тогда логика «если localStorageService.get (« тома ») не является нулевым, то установите значение localStorageService для« volume »в $ scope.audio.volume». Предполагая, что на этом этапе $ scope.audio.volume не имеет значения, логика просто говорит: «если в localStorage есть значение, то установите его в null». Попробуйте заменить код следующим: if (localStorageService.get ("volume") == null) {localStorageService.set ("volume", "1");}; $ scope.audio = $ scope.audio || {}; $ scope.audio.volume = localStorageService.get ("volume"); –

ответ

0

Везде, где вы инициализируете свои свойства области внутри контроллера, вам необходимо присвоить значение $ scope.audio.volume, используя значение localStorage. , например:

$scope.audio.volume = localStorageService.get("volume"); 

Но это будет работать только если вы уже инициализирован свойство «аудио». Если объем является единственным свойством «аудио» вы хотите инициализировать, то ваш инициализации должен выглядеть следующим образом:

$scope.audio = {'volume':localStorageService.get("volume")}; 

Так пример контроллера будет выглядеть следующим образом:

var myApp = angular.module('myApp',[]); 

myApp.controller('MyAudioController', ['$scope', function($scope) { 
    $scope.audio = {'volume':localStorageService.get("volume")};//<--THIS IS IMPORTANT 
    $scope.adjustVolume = function(){ 
    localStorageService.set("volume",$scope.audio.volume); 
    } 
}]); 
+0

Я делаю это, чтобы установить значение объема в localStorage localStorageService.set ("volume", $ scope.audio.volume); , и это сохраняет его, моя проблема в том, что когда я обновляю страницу, значение диапазона возвращается к 1.и я хочу, чтобы он был таким же, как значение из localStorage –

+0

Извините, я использовал метод «set» для localStorage вместо «get» в моем исходном ответе. Я обновил его - надеюсь, теперь это яснее. –

0

Я решил эта проблема, используя функцию watch, которая обновляет значение каждый раз, когда происходит изменение.

  $scope.$watch(function(){ 
      $scope.audio.volume = localStorageService.get("volume");     
      return true; 
     }); 
Смежные вопросы