我正在创建一个用户清单,我想在每次检查并关闭/打开应用程序时保存他的progess。
这是我到目前为止所做的:
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);
});
问题是我不知道如何存储&#34; isToggled&#34;变量。 任何帮助将不胜感激。
答案 0 :(得分:1)
其中一个选项,您可以使用浏览器localStorage,在角色上你有这个插件:https://github.com/grevory/angular-local-storage
在app启动阶段配置后
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>
答案 1 :(得分:-1)
更改不会更新您的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;
}