Localstorage가 내 Todo 목록에서 작동하지 않습니다. Angular

Question

다른 쪽에서이 localstorage 코드를 찾았지만 작동하지 않는 자체 코드에 넣으려고했습니다. 내 사이트를 새로 고침하면 할 일 목록의 수를 볼 수 있지만 목록 자체는 사라졌습니다.

누군가 나를 설명하는 방법, 무엇이 잘못 되었나요? :)

Btw는 내 컨트롤러는 내 시작 body 태그에 :

<main> 
     <h1>What to do today?</h1> 

     <div class="container"> 

      <span>{{ remaining() }} of {{ todos.length }} remaining</span> 

      <form ng-submit="addTodo()"> 
       <input type="text" ng-model="todoInput" placeholder="Add a new todo" required> 
       <input type="submit" value="Add new list" > 
      </form> 

      <ul> 
       <li ng-repeat="todo in todos"> 
        <input type="checkbox" ng-model="todo.done"> 
        <span ng-bind="todo.todoText"></span> 
       </li> 
      </ul> 

      <button ng-click="remove()">Clear completed</button> 

     </div> 
    </main> 

    <footer> 
     <div layout="row" layout-align="center center"> 
      <h3>Winkel Design a/s</h3> 
     </div> 
    </footer> 

    <script> 
      var app = angular.module('TodoApp', []); 
      app.controller('todoCtrl', function($scope) { 
       $scope.saved = localStorage.getItem('todos'); 
       $scope.todos = (localStorage.getItem('todos')!==null) ? JSON.parse($scope.saved) : [{todoText:'Clean your room', done:false}]; 
       localStorage.setItem('todos', JSON.stringify($scope.todos)); 

       $scope.addTodo = function() { 
        $scope.todos.push({todoText:$scope.todoInput, done:false}); 
        $scope.todoInput = ""; 
        localStorage.setItem('todos', JSON.stringify($scope.todos)); 
       }; 

       $scope.remove = function() { 
        $scope.todos = $scope.todos.filter(function(item){ 
         return !item.done 
        }); 
       }; 

       $scope.remaining = function() { 
        var count = 0; 
        angular.forEach($scope.todos, function(todo){ 
         count+= todo.done ? 0 : 1; 
        }); 
        return count; 
       }; 

       $scope.archive = function() { 
        var oldTodos = $scope.todos; 
        $scope.todos = []; 
        angular.forEach(oldTodos, function(todo){ 
         if (!todo.done) 
          $scope.todos.push(todo); 
        }); 
        localStorage.setItem('todos', JSON.stringify($scope.todos)); 
       }; 

      }); 
    </script> 
</body> 

Answer 1

LIVE DEMO

것 같다, 코드는 ng-repeat 지시어를 제외하고 잘 작동합니다. 나는 track by $index을 추가해야했고, 지금까지 볼 수있는 한 모든 것이 잘 작동합니다. docs에서

<li ng-repeat="todo in todos track by $index"> 
    <input type="checkbox" ng-model="todo.done"> 
    <span ng-bind="todo.todoText"></span> 
</li> 

: 중복 항목을 반복해야하는 경우

, 당신은 표현으로 트랙을 사용하여 자신과 기본 추적 동작을 대체 할 수 있습니다.

예를 들어, 당신은 특별한 범위 속성 $ 지수 사용하여 컬렉션의 각 항목의 인덱스 항목을 추적 할 수 있습니다 또한

을, 나는 어떤 것, angular-local-storage처럼, 당신은 각 모듈을 사용하는 것이 좋습니다 브라우저가 localStorage API를 지원하지 않는 경우 쿠키로 대체합니다.