Угловая JS

-2

(function(){ 

    var app=angular.module('tasks_list',[]); 
    app.controller('TasksController',['$scope',function($scope){ 
     $scope.taskList=localStorage.getItem('memoList'); 
     if($scope.taskList==undefined) 
      $scope.taskList=[]; 

     console.log($scope.taskList); 
     console.log($scope.taskList.length); 
     $scope.addTask=function() 
     { 
      var task=document.getElementById('taskBox').value; 
      console.log(task); 
      $scope.taskList.push(task); 
      console.log($scope.taskList); 

      localStorage.clear(); 
      localStorage.setItem('memoList',$scope.taskList); 
     }; 

    }]); 


})();

index.html

<!DOCTYPE html> 
<html ng-app="tasks_list"> 
<head> 
    <link rel="stylesheet" href="style.css"> 
</head> 
<body> 
    <div id="mainDiv" ng-controller="TasksController"> 
     <h2>My To-do List</h2> 
     <div class="promptMsg" ng-hide="taskList.length">Add your tasks here!</div> 
     <form> 
      <div id="list" ng-show="taskList.length" ng-repeat="task in taskList track by $index"> 
       <input type="checkbox"/> 
       <p>{{task}}</p> 
      </div> 
      <div id="addList"> 
       <input type="text" id="taskBox" autofocus/> 
       <input type="submit" value="Add" ng-click="addTask()"/> 
      </div> 
      <input type="submit" value="Remove completed tasks"/> 
     </form> 
    </div> 

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> 
    <!-- <script src="http://gregpike.net/demos/angular-local-storage/src/angular-local-storage.js"></script> --> 

    <script src="app.js"></script> 
</body> 
</html>

В приведенном выше app.js файла, я получаю сообщение об ошибке Msg

undefined is not a function

на $scope.taskList.push(task);.

Кроме того, в <p> внутри div id="list", я хочу добавить элемент массива, но получаю текстовое письмо по букве.

Пожалуйста, сообщите, что не так в коде.

источник

2014-11-26 Raksha Bhartiya

Так что '$ scope.taskList' явно не массив! – adeneo

как? пожалуйста, дополните. –

Вы должны разобрать, что уберется от localStorage. Сейчас это просто строка. 'JSON.parse (localStorage.getItem ('memoList'))' – cfj

Несколько вещей:

Dont сделать это: var task=document.getElementById('taskBox').value; - вместо того, чтобы использовать ng-model в целях привязки его к области.
Не обращайтесь к localStorage напрямую. Используйте услугу $window или сторонний модуль, например ngStorage.
Не используйте ngClick на отправке. Используйте либо ngSubmit, либо ngClick, но не смешивайте их.

Я обновил ваш код, чтобы заставить его работать, но отключил вызовы sessionStorage, поскольку они заблокированы в изолированной программной памяти Stackoverflow.

(function(){ 
 

 
    var app=angular.module('tasks_list',[]); 
 
    
 
    app.controller('TasksController',['$scope', '$window', function($scope, $window){ 
 
    
 
     // cannot use localStorage in sanbox 
 
     //$scope.taskList = angular.fromJson($window.localStorage.getItem('memoList')); 
 
     
 
     if($scope.taskList==undefined) 
 
      $scope.taskList=[]; 
 

 
     console.log($scope.taskList); 
 
     console.log($scope.taskList.length); 
 
     $scope.addTask = function(newTask) { 
 
     
 
      console.log(newTask); 
 
      $scope.taskList.push(newTask); 
 
      console.log($scope.taskList); 
 
     
 
      $scope.newTask = ""; 
 

 
      // cannot use localStorage in sandbox 
 
      //$window.localStorage.clear(); 
 
      //$window.localStorage.setItem('memoList', angular.toJson($scope.taskList)); 
 
     }; 
 

 
    }]); 
 

 

 
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="tasks_list"> 
 

 
    <div id="mainDiv" ng-controller="TasksController"> 
 
     <h2>My To-do List</h2> 
 
     <div class="promptMsg" ng-hide="taskList.length">Add your tasks here!</div> 
 
     <form> 
 
      <div id="list" ng-show="taskList.length" ng-repeat="task in taskList track by $index"> 
 
       <input type="checkbox"/> 
 
       <p>{{task}}</p> 
 
      </div> 
 
      <div id="addList"> 
 
       <input type="text" ng-model="newTask" autofocus/> 
 
       <a ng-click="addTask(newTask)">Add</a> 
 
      </div> 
 
      <input type="submit" value="Remove completed tasks"/> 
 
     </form> 
 
    </div> 
 
{{taskList}} 
 
</div>

Вот ссылка на тот же код, с линиями LocalStorage ун-комментируемых, в противном случае это тот же самый код здесь.

http://plnkr.co/edit/XOkihsxdHqcxXJyYtG1w?p=preview

Как и ожидалось, вы можете обновить браузер, и список будет загружен из LocalStorage.

источник

2014-11-26 11:49:51 Martin

спасибо martin, но он показывает неожиданную синтаксическую ошибку токена для fromJson(). –

И неопределенная функция для функцииJSON(). –

Я обновил свой первоначальный ответ, чтобы включить ссылку на plunkr, в которой строки localStorage не комментируются. https://docs.angularjs.org/api/ng/function/angular.toJson https://docs.angularjs.org/api/ng/function/angular.fromJson – Martin

Вам нужно иметь в виду, что localStorage может хранить только строки. Когда вам нужно сохранить массив, вам необходимо сначала преобразовать его в строку, используя JSON.stringify(). При извлечении строки из хранилища вы конвертируете ее обратно в массив с JSON.parse().

См. this Plunker для демонстрации.

источник

2014-11-26 11:53:13 cfj

Угловая JS

ответ

Смежные вопросы