我正在使用 Angular JS，并且很难弄清楚如何更新值。我已经尝试过了，但没有成功。我将发布我的 js 文件，如果有人知道有关我的问题的任何帮助，将不胜感激。我遇到的只是 updateTask 问题。
function TodoCtrl($scope) {
$scope.todos = [
{text:'task1', text2:'Mow the lawn', selected:false},
{text:'task2', text2:'Wash the car', selected:false}
];
$scope.getTotalTodos = function () {
return $scope.todos.length;
};
$scope.addTask = function () {
$scope.todos.push({text:$scope.formTodoName, text2:$scope.formTodoDescription, selected:false});
$scope.formTodoName = '';
$scope.formTodoDescription = '';
};
$scope.removeTask = function () {
$scope.todos = _.filter($scope.todos, function(todo){
return !todo.selected;
});
};
$scope.updateTask = function () {
if ($scope.todos.selected:true){
$scope.todos.put({text:$scope.formTodoName, text2:$scope.formTodoDescription, selected:false});
$scope.formTodoText = '';
};
};
}
index.html
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Todo App</title>
<header>Todo App</header>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="//use.edgefonts.net/vast-shadow:n4:all.js"></script>
<script src="//use.edgefonts.net/vast-shadow:n4:all;megrim.js"></script>
</head>
<body>
<div class="todo-wrapper" ng-controller="TodoCtrl">
<h2>You have <span class="emphasis">{{getTotalTodos()}}</span> tasks</h2>
<ul>
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.selected"/>
<span class="selected-{{todo.selected}}">{{todo.id}} {{todo.text}}: {{todo.text2}} {{todo.date_created}}</span>
</li>
</ul>
<form>
<input class="add-input" placeholder="task name" type="text" ng-model="formTodoName" ng-model-instant />
<input class="add-input2" placeholder="task decription" type="text" ng-model="formTodoDescription" ng-model-instant />
<button class="add-btn" ng-click="addTask()"><h2>Add</h2></button>
</form>
<form>
<input type="text" ng-model="task.text"></input>
<button class="update-btn" ng-click="updateTask()"><h3>Update Task</h3></button>
<button class="clear-btn" ng-click="removeTask()">Remove Task</button>
</div>
</body>
</html>
<script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
最佳答案
您提到您的待办事项确实有来自后端的 id 属性。
$scope.todos = [
{id: 1, text:'task1', text2:'Mow the lawn', selected:false},
{id: 2, text:'task2', text2:'Wash the car', selected:false}
];
然后更新其中一个，
$scope.updateTask = function (task) {
// search $scope.todos for the item to update
var indexOfTask;
for(var i=0;i<$scope.todos.length;i++) {
if($scope.todos[i].id===task.id) indexOfTask = i;
}
// update the todo
$scope.todos[indexOfTask] = todo;
};
您尚未发布表单 HTML，但您需要传入在提交处理程序中更新的任务。
<form ...>
...
<input type="text" ng-model="task.text"></input>
<input type="submit" ng-click="updateTask(task)"></input>
</form>
编辑更新表单输入并提交按钮以传递对象:
<input class="add-input" placeholder="task name" type="text" ng-model="task.text" ng-model-instant />
<input class="add-input2" placeholder="task decription" type="text" ng-model="task.text2" ng-model-instant />
...
<button class="add-btn" ng-click="addTask(task)"><h2>Add</h2></button>
关于javascript - 使用 angularjs 更新值的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31418040/