爲什麼我的待辦事項功能不起作用？

Question

我使用angular.js和離子框架來製作待辦事項應用程序。我刪除todoFunction運作良好，但我添加新的todo功能不起作用。一旦我點擊添加項目按鈕，待辦事項列表中將不會顯示任何文本，但會爲剛剛創建的新待辦事項添加新空間apears。

第二次嘗試創建新的待辦事項時，沒有添加任何空間，也沒有任何工作。

這裏是我的toController：

facebookExample.controller('todoController', ['$scope', function($scope) { 
// Initialize the todo list array 
//if local storage is null save the todolist to local storage 
if (localStorage.getItem("mytodos") === null) 
{ 

    localStorage.setItem("mytodos", angular.toJson($scope.todoList)); 

}else 
{ 
    //set the todolist from local storage 
    $scope.todoList = angular.fromJson(localStorage.getItem("mytodos")); 
} 



// Add an item function 
$scope.todoAdd = function() { 
    //check to see if text has been entered, if not exit 
    if ($scope.todoInput === null || $scope.todoInput === ''){return;} 

    //if there is text add it to the array 
    $scope.todoList.push({todoText:$scope.todoInput, done:false}); 

    //clear the textbox 
    $scope.todoInput = ""; 

    //resave the list to localstorage 
    localStorage.setItem("mytodos", angular.toJson($scope.todoList)); 

}; 

$scope.remove = function() { 
    //copy list 
    var oldList = $scope.todoList; 
    //clear list 
    $scope.todoList = []; 
    //cycle through list 
    angular.forEach(oldList, function(x) { 
     //add any non-done items to todo list 
     if (!x.done) $scope.todoList.push(x); 
    }); 
    //update local storage 
    localStorage.setItem("mytodos", angular.toJson($scope.todoList)); 

}; 

//The Update function 
//This waits 100ms to store the data in local storage 
$scope.update = function() { 
//update local storage 100 ms after the checkbox is clicked to allow it to process 
setTimeout(function(){ 
    localStorage.setItem("mytodos", angular.toJson($scope.todoList)); 
},100); 


}; 

}]); 

這裏是我的視圖模板：

<ion-view title="Tasks" ng-controller="todoController"> 
<ion-content> 
<!-- our list and list items --> 

<h1>Tasks</h1> 

<div class="item item-input-inset"> 
<label class="item-input-wrapper"> 
<!-- The actual input tag which is bound to the todoInput using ng-model --> 
<input type="text" placeholder="Add New Item" ng-model="todoInput" size="100"> 
</label> 
<!-- Our button thay will call our funtion to add a new todo item --> 
<button class="button button-small" ng-click="todoAdd()"> 
Add Item 
</button> 
</div> 




<div ng-repeat="x in todoList"> 
<li class="item item-checkbox"> 
<label class="checkbox"> 

<!-- this is the checkbox element, you will see it is bound to the done setting in the items array --> 
<!-- When clicked it calls the update function to update the item to its done status --> 
    <input type="checkbox" ng-model="x.done" ng-click="update()"> 
</label> 

<!-- this is a span tag that shows the item text, I am using ng-bind, instead of the span tag we could have used {{x.todoText}} as well --> 
<span>{{x.todoText}} </span> 
</li> 
</div> 
<!-- the remove button will call the remove function and remoave all items that are marked done --> 
<button class="button button-block button-assertive" ng-click="remove()"> 
Remove Checked Items 
</button> 


</ion-content> 
</ion-view> 

Answer 1

你推到一個不存在的變量，$ scope.todoList還不存在。

您需要先將$ scope.todoList定義爲數組，然後才能保存或從本地存儲加載。現在，如果在本地存儲中沒有保存列表時第一次運行應用程序，則會創建一個新陣列。

$scope.todoList = []; 

if (localStorage.getItem("mytodos") === null) { 
    localStorage.setItem("mytodos", angular.toJson($scope.todoList)); 
} else { 
    $scope.todoList = angular.fromJson(localStorage.getItem("mytodos")); 
} 

由於這一問題的，你可能不小心保存壞數據到本地存儲，所以如果你仍然有問題，只保存一個空數組到本地存儲。否則你的應用程序將工作正常，看看：JSFiddle