Question

我正在尝试使用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()"

我希望范围的值是动态的。

这是我的js：

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

这样我设法在localStorage中保存关键字“音量”，但是如果我刷新页面，则范围滑块的位置返回1，即使localStorage仍然是设置为其他数字。

如何保持范围的值与localStorage的值相同，以及范围的位置。

Answer 1

无论您在控制器内初始化范围属性，都需要使用localStorage中的值分配$ scope.audio.volume的值。例如：

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

但这只有在您已经初始化了该属性＆＃34; audio＆＃34;时才会起作用。如果音量是＆＃34;音频＆＃34;的唯一属性。你想初始化然后你的初始化应该是这样的：

$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);
  }
}]);

Answer 2

我使用watch函数解决了这个问题，每次发生更改时都会更新值。

         $scope.$watch(function(){
            $scope.audio.volume = localStorageService.get("volume");                
            return true;
        });

使用localStorage Angular更新范围值

2 个答案: