在Angularjs中保存一個變量的狀態

Question

我正在創建一個用戶清單，每當他檢查並關閉/打開應用程序時，我想保存他的進度。

這是我迄今所做的：

HTML

 <i class="white-circle" ng-class="{'green-circle': isToggled1 === true}" ng-click="isToggled1 = !isToggled1">1</i> 
     <i class="white-circle" ng-class="{'green-circle': isToggled2 === true}" ng-click="isToggled2 = !isToggled2">2</i> 
     <i class="white-circle" ng-class="{'green-circle': isToggled3 === true}" ng-click="isToggled3 = !isToggled3">3</i> 

JS

angular.module('starter.rencontreController', ['ngSanitize', 

'LocalStorageModule']) 
.directive('toggleClass', function() { 
    return { 
    restrict: 'A', 
    link: function(scope, element, attrs) { 
     element.on('click', function() { 
     element.toggleClass(attrs.toggleClass); 
     }); 
    } 
    } 

}) 
.config(function($stateProvider, $urlRouterProvider) { 
$stateProvider 

    .state('rencontre', { 
     url: '/rencontre', 
     templateUrl: 'templates/rencontre.html', 
     controller: 'rencontreController' 
    }); 
}) 

.config(function (localStorageServiceProvider) { 
    localStorageServiceProvider 
    .setStorageType('sessionStorage'); 
}) 

.controller('rencontreController', function ($scope, localStorageService){ 

    $scope.isToggled1 = localStorageService.get('isToggled1') ? localStorageService.get('isToggled1') : false; 


    scope.$watch('isToggled1', function(newValue, oldValue) { 
     localStorageService.set('isToggled1', newValue); 
    }); 

問題是我不知道如何來存儲 「isToggled」變量。 任何幫助將不勝感激。

Answer 1

其中一個選項，你可以使用瀏覽器localStorage爲，對角你有這樣的插件：https://github.com/grevory/angular-local-storage

配置應用程序啓動時階段後

myApp.config(function (localStorageServiceProvider) { 
    localStorageServiceProvider 
    .setPrefix('myApp') 
    .setStorageType('sessionStorage') 
    .setNotify(true, true) 
}); 

你可以像這樣在你的控制器：

//when user checks the box 
localStorageService.set(MY_CHECKBOX_NAME, true); 

UPD

你需要在你的控制器對象（在你的情況下，它是一個array因爲你有類似的事情列表），將讓他們每個人的狀態（也可以有其他屬性，如title爲例）。

//in controller 
$scope.items = [{ 
    state: false, 
    title:'item1' 
}, 
{ 
    state: false, 
    title:'item2' 
}, 
{ 
    state: false, 
    title:'item3' 
}]; 

//in template 
<i ng-repeat="i in items" class="white-circle" ng-class="{'green-circle': i.state === true}" ng-click="i.state = !i.state">{{$index}} {{i.title}}</i> 

Answer 2

您的localStorage值不會通過更改進行更新。如果你想讓它工作，你需要創建一個函數來存儲localStorage的值，可以使用ng-click或者使用保存按鈕來觸發這個函數。 更改控制器中的值而不是視圖中的值也更清晰。

啓動控制器後，檢查localStorage中的字段是否存在。如果有值，則將該值分配給該值以從上次檢索存儲的值。如果沒有值，則初始化默認值。

這裏是我會怎麼做：

在你的控制器：

.controller('rencontreController', function ($scope, localStorageService){ 

var defaultValues = [ 
    {index: 1, isToggled: false}, 
    {index: 2, isToggled: false}, 
    {index: 3, isToggled: false} 
]; 
var storedObj = localStorageService.get("storedObj"); 
if (storedObj = undefined) { 
    $scope.obj = defaultValues; 
else { 
    $scope.obj = storedObj; 
} 

//add a function to store the value 
$scope.toggle = function(index) { 
    // code to change the value of the clicked index 

    localStorageService.set("storedObj", $scope.obj); 
} 

在你的HTML：

<i class="white-circle" ng-class="{'green-circle': item.isToggled}" ng-click="$scope.toggle(item.index)" ng-repeat="item in $scope.obj">{{item.index}}</i> 

更新：

添加var storedObj

var storedObj = localStorageService.get("storedObj"); 
if (storedObj = undefined) { 
    $scope.obj = defaultValues; 
else { 
    $scope.obj = storedObj; 
}