Currently, I have the ability to generate objects and store them in a rails database using a json api. The application is a basic todo list where adding an object places it into the todo list above the input fields. Furthermore, I can access all objects on the index view and display them as a list of my todo items.
Upon selecting a checkbox next to each todo item, it is intended to change its :done attribute to true. This would mean that the item should no longer be displayed after clicking a "Clear" button which triggers the clearCompleted function.
Shown below is my JavaScript code:
angular.module("Todo", ["ngResource"])
function TodoController($scope, $filter, $resource) {
Todo = $resource("/todos.json", {id: "@id"}, {update: {method: 'PUT'}})
$scope.todos = Todo.query()
$scope.getTotalTodos = function () {
return $scope.todos.length;
};
$scope.clearCompleted = function () {
Todo.save({done:true})
$scope.todos = $filter("filter")($scope.todos, {done:false});
};
$scope.addTodo = function () {
entry = Todo.save({title:$scope.newTodo.title, importance:$scope.newTodo.importance, description:$scope.newTodo.description, done:false})
$scope.todos.push(entry);
$scope.newTodo.title = '';
$scope.newTodo.importance = '';
$scope.newTodo.description = '';
};
}
The issue lies in creating a new todo item with the attribute of :done => true instead of updating the existing record in the database. This discrepancy occurs because within the clearCompleted function, we are seemingly creating a new object rather than modifying an existing one.
How can I properly update the database record?