Question

我正在创建一个用户清单，我想在每次检查并关闭/打开应用程序时保存他的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;变量。任何帮助将不胜感激。

Answer 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>

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;
}

在Angularjs中保存变量的状态

2 个答案: