CODEWITHSUNDEEP
javascriptangularjshtml
codigomonstruo
codigomonstruo

Reputation: 1091

Why is my todo functions not working?

I am using angular.js and ionic framework to make a todo app. My remove todoFunction works well but my add new todo function does not work. Once I click on the Add Item button, no text appears on the todo list though new space apears to be added for my new todo item just created.

The second time I try to create a new todo item, no space is added, andn nothing works.

Here is my 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);


};

}]);

And here is my view template:

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

Upvotes: 0

Views: 412

Answers (1)

Rob Louie
Rob Louie

Reputation: 2681

You are pushing onto a non-existent variable, $scope.todoList does not yet exist.

You need to define $scope.todoList as an array first, then you can save or load from local storage. Now the first time you run the app when there is no list saved in local storage, a new array will be created.

$scope.todoList = [];

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

Because of this problem, you may have accidentally saved bad data to local storage, so if you still have issues just save an empty array to local storage. Otherwise your app will work fine, have a look: JSFiddle

Upvotes: 1

Related Questions