我在使用 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()">✘</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)。但是，当我添加第二个列表并单击编辑时，它在第二个列表(不仅仅是第二个列表)上显示编辑表单、保存和取消按钮。为什么 ？我的代码有什么问题？
谢谢 比利
最佳答案
问题出在 $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()">✘</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>关于javascript - AngularJS 待办事项列表应用程序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34505173/