Question

我正在使用angular.js和离子框架制作todo应用。我的删除todoFunction运行良好但我添加新的待办事项功能不起作用。单击“添加项目”按钮后，待办事项列表中不会显示任何文本，但为刚刚创建的新待办事项添加了新空间。

我第二次尝试创建一个新的待办事项时，没有添加任何空间，并且没有任何效果。

这是我的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定义为数组，然后才能从本地存储中保存或加载。现在，当本地存储中没有保存列表时，第一次运行应用程序时，将创建一个新阵列。

import Sails from 'sails';
^^^^^^

SyntaxError: Unexpected token import

由于此问题，您可能不小心将错误数据保存到本地存储，因此如果仍有问题，只需将空数组保存到本地存储。否则你的应用程序将正常工作，看看：JSFiddle

为什么我的待办事项功能不起作用？

1 个答案: