AngularJS待办事项列表应用程序

AngularJS ToDo List App

本文关键字：列表 应用程序 AngularJS      更新时间：2023-09-26

我在使用Angular JS创建todo列表应用程序时遇到了一些问题。我的HTML和Javascript代码如下：

HTML代码：

<!doctype html>
<html ng-app="todoApp">
<head>
    <script src="bower_components/angular/angular.min.js"></script>
    <script src="js/controller.js"></script>
    <style>
    .done-true {
      text-decoration: line-through;
      color: grey;
    }
    input:required {
    box-shadow:none;
    }
    </style>
</head>
<body>
<h2>Todo</h2>
<div ng-controller="TodoListController">
<form ng-submit="addTodo()" name="form">
    <input type="text" ng-model="todoText"  size="30" placeholder="add new todo here" required>
    <input class="btn-primary" type="submit" value="add"> 
</form>
<div>Incompleted : {{remaining()}}</div>
<div>Completed : {{todos.length - remaining()}}</div>
<a href="" ng-click="delete()">Delete</a>
<ul class="unstyled">
   <li ng-repeat="todo in todos | orderBy : $index:true">
       <button type="button" ng-click="remove()">&#10008;</button>
       <input type="checkbox" ng-model="todo.done">
       <span class="done-{{todo.done}}" ng-hide="editing">{{todo.text}}</span>
       <input type="text" ng-show="editing" ng-model="todo.text">
       <button type="submit" ng-hide="editing" ng-click="change(todo); editing === true">Edit</button>
       <button type="submit" ng-show="editing" ng-click="save(); editing === false">Save</button>
       <button type="submit" ng-show="editing" ng-click="cancel(); editing === false">Cancel</button>
    </li>
</ul>
<pre>NewField : {{newField | json}}</pre>
<pre>Todos : {{todos | json}}</pre>
</div>    
</body>
</html>

我的Javascript代码：

var app = angular.module('todoApp', [])
app.controller('TodoListController', ['$scope', function($scope) {
    $scope.todos = [];
    $scope.newField = {};
    $scope.addTodo = function() {
        $scope.todos.push({text:$scope.todoText, done:false});
        $scope.todoText = '';
    };
    $scope.remaining = function() {
        var count = 0;
        angular.forEach($scope.todos, function(todo) {
            count += todo.done ? 0 : 1;
        });
          return count;
        };
    $scope.delete = function() {
        var oldTodos = $scope.todos;
        $scope.todos = [];
        angular.forEach(oldTodos, function(todo) {
           if (!todo.done) $scope.todos.push(todo);
        });
    };
    $scope.remove = function(){
        $scope.todos.splice(this.$index, 1);
    };
    $scope.editing = false;
    $scope.change = function(field){
        $scope.editing = $scope.todos.indexOf(field);
        $scope.newField = angular.copy(field);
    }
    $scope.save = function(index) {
        $scope.todos[$scope.editing] = $scope.todos;
        $scope.editing = false;      
    };
    $scope.cancel = function(index) {
        $scope.todos[$scope.editing] = $scope.newField;
        $scope.editing = false;      
    };

}]);

以下是我的问题：1.我的待办事项列表仍然是空的。当我添加一个列表并单击编辑时，它没有显示编辑表单、保存和取消按钮（它只复制到NewField）。然而，当我添加第二个列表并单击编辑时，它在2个列表上显示了编辑表单、保存和取消按钮（而不仅仅是第二个）。为什么？我的代码出了什么问题？

  1. 我的保存按钮不工作。当我更改编辑表单中的列表并单击保存时。该列表被清空并放在其他列表的底部。为什么

谢谢Billy

问题出现在$scope.editing切换中。在更新了代码的一行之后，一切都开始正常工作。在$scope.change功能中将$scope.editing = $scope.todos.indexOf(field)更新为$scope.editing = true；

var app = angular.module('todoApp', [])
app.controller('TodoListController', ['$scope', function($scope) {
    $scope.todos = [];
    $scope.newField = [];
    $scope.addTodo = function() {
        $scope.todos.push({text:$scope.todoText, done:false, editing: false});
        $scope.todoText = '';
    };
    $scope.remaining = function() {
        var count = 0;
        angular.forEach($scope.todos, function(todo) {
            count += todo.done ? 0 : 1;
        });
          return count;
        };
    $scope.delete = function() {
        var oldTodos = $scope.todos;
        $scope.todos = [];
        angular.forEach(oldTodos, function(todo) {
           if (!todo.done) $scope.todos.push(todo);
        });
    };
    $scope.remove = function(){
        $scope.todos.splice(this.$index, 1);
    };
    $scope.change = function(field){
        var todoIndex = $scope.todos.indexOf(field);
        $scope.newField[todoIndex] = angular.copy(field);
        $scope.todos[todoIndex].editing = true;
    }
    $scope.save = function(index) {
      $scope.todos[index].editing = false;
      
    };
    $scope.cancel = function(index) {
        $scope.todos[index] = $scope.newField[index];      
    };
}]);
<!doctype html>
<html ng-app="todoApp">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
    <style>
    .done-true {
      text-decoration: line-through;
      color: grey;
    }
    input:required {
    box-shadow:none;
    }
    </style>
</head>
<body>
<h2>Todo</h2>
<div ng-controller="TodoListController">
<form ng-submit="addTodo()" name="form">
    <input type="text" ng-model="todoText"  size="30" placeholder="add new todo here" required>
    <input class="btn-primary" type="submit" value="add"> 
</form>
<div>Incompleted : {{remaining()}}</div>
<div>Completed : {{todos.length - remaining()}}</div>
<a href="" ng-click="delete()">Delete</a>
<ul class="unstyled">
   <li ng-repeat="todo in todos | orderBy : $index:true">
       <button type="button" ng-click="remove()">&#10008;</button>
       <input type="checkbox" ng-model="todo.done">
       <span class="done-{{todo.done}}" ng-hide="todo.editing">{{todo.text}}</span>
       <input type="text" ng-show="todo.editing" ng-model="todo.text">
       <button type="submit" ng-hide="todo.editing" ng-click="change(todo); todo.editing === true">Edit</button>
       <button type="submit" ng-show="todo.editing" ng-click="save($index); todo.editing === false">Save</button>
       <button type="submit" ng-show="todo.editing" ng-click="cancel($index); todo.editing === false">Cancel</button>
    </li>
</ul>
<pre>NewField : {{newField | json}}</pre>
<pre>Todos : {{todos | json}}</pre>
</div>    
</body>
</html>

相关文章：