Сохранить состояние переменной в Angularjs

0

Я создаю контрольный список пользователя, где я хочу сохранить его 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);
  });

Проблема в том, что я не знаю, как хранить переменные "isToggled". Любая помощь будет оценена.

  • 0
    Не могли бы вы сделать $scope.isToggled1 и $scope.isToggled2 ?
  • 0
    не работает :/
Теги:

2 ответа

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>
Поделиться
  • 0
    Да, используйте localStorage для сохранения вашего прогресса является лучшим решением. Если вам не нужно загружать прогресс в базу данных, но я сомневаюсь, что это так.
  • 0
    Я знаю, но My_Checkbox_Name будет чем? Белый круг?
Показать ещё 1 комментарий
0

Изменения в вашем локальном хранилище не обновляются. Если вы хотите, чтобы он работал, вам нужно создать функцию для сохранения значения в localStorage, используя ng-click или используя кнопку save для запуска этой функции. Он также более чистый, чтобы изменить значения в контроллере, а не в поле зрения.

После запуска вашего контроллера вы проверяете, существует ли поле в вашем локальном хранилище. Если есть значение, присвойте этому значению значение для извлечения сохраненных значений из последнего времени. Если значение отсутствует, инициализируйте значения по умолчанию.

Вот как я это сделаю:

В вашем контроллере:

.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;
}
Поделиться
  • 0
    У меня есть эта ошибка ReferenceError: Неверная левая сторона в назначении
  • 0
    Извините, я забыл об этом. Я обновил свой ответ.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню