Javascript AngularJS待办事项列表应用程序_Javascript_Angularjs

Javascript AngularJS待办事项列表应用程序

javascript angularjs

Javascript AngularJS待办事项列表应用程序,javascript,angularjs,Javascript,Angularjs,我在使用Angular JS创建待办事项列表应用程序时遇到一些问题。我的HTML和Javascript代码如下所示： HTML代码： <!doctype html> <html ng-app="todoApp"> <head> <script src="bower_components/angular/angular.min.js"></script> <script src="js/controller.js"&

我在使用Angular JS创建待办事项列表应用程序时遇到一些问题。我的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>

以下是我的问题： 1.我的待办事项清单还是空的。当我添加一个列表并单击编辑时，它没有显示编辑表单、保存和取消按钮（它只复制到新字段）。但是，当我添加第二个列表并单击edit时，它在2个列表（不仅仅是第二个列表）上显示了edit form、save和cancel按钮。为什么？我的代码怎么了

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

谢谢

比利

问题出在

$scope.编辑

切换。在更新一行代码后，一切都开始正常工作。将

$scope.editing=$scope.todos.indexOf（field）

更新为

$scope.editing=true

中的

$scope.change

函数

var-app=angular.module（'todoApp'，[]）
app.controller（'TodoListController'，['$scope'，函数（$scope）{
$scope.todos=[]；
$scope.newField=[]；
$scope.addTodo=函数（）{
$scope.todos.push（{text:$scope.todoText，done:false，editing:false}）；
$scope.todoText=''；
};
$scope.remaining=函数（）{
var计数=0；
angular.forEach（$scope.todos，function（todo）{
计数+=todo.done？0:1；
});
返回计数；
};
$scope.delete=函数（）{
var oldTodos=$scope.todos；
$scope.todos=[]；
角度.forEach（oldTodos，function（todo）{
如果（！todo.done）$scope.todos.push（todo）；
});
};
$scope.remove=函数（）{
$scope.todos.splice（此.$index，1）；
};
$scope.change=函数（字段）{
var todoIndex=$scope.todos.indexOf（字段）；
$scope.newField[todoIndex]=角度复制（字段）；
$scope.todos[todoIndex].editing=true；
}
$scope.save=函数（索引）{
$scope.todos[index]。编辑=false；
};
$scope.cancel=函数（索引）{
$scope.todos[index]=$scope.newField[index]；
};
}]);

.真的{
文字装饰：线条贯通；
颜色：灰色；
}
输入：必选{
盒影：无；
}
待办事项
未完成：{{剩余（）}}
已完成：{{todos.length-remaining（）}}


✘
{{todo.text}
编辑
拯救
取消


NewField:{{NewField | json}}
Todos:{{Todos | json}}
好的，它解决了我的第一个问题。现在，当我在列表上单击“编辑”时，我的所有列表都是编辑形式的，而不是编辑形式中仅选择一个列表。我的“保存”和“取消”按钮同样有效。取消保存更改我将取消函数更改为$scope.Cancel=函数（索引）{$scope.todos.text=$scope.newField.text；$scope.editing=false；}但仍然不起作用我已经更新了代码片段，以便分别与每个todo交互，这样您将获得所需的行为。您好，我有一个新问题。假设我有两项。当我在第一个项目和第二个项目上同时按下edit（编辑）时（因此这两个项目都处于编辑状态），我在第一个项目上按下cancel（取消），但效果在第二个项目上（意味着第二个项目被第一个项目的cancel（取消）按钮取消）。为什么？@Billy checkout我又更新了截取的代码来修复所描述的bug。检查它是如何工作的知道。。。
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;      
    };



}]);