I want to delete an item from my laravel database. The application is a simple Todo-List.
Therefore I have a TodosController in my main.js, which is handeld by AngularJS and I am trying to create a Rest API to Laravel to store my data in a mysql database.
Retrieving data works. Also to store new items into the array. Obviously the next step is to find out, how to delete items. And although I managed to delete items from the scope, I can't make them disappear from my database.
Here is the response I am getting from my console:
Here is my Angular-TodosController:
function TodosController($scope, $http) {
$http.get('todos').success(function(todos) {
$scope.todos = todos;
});
$scope.addTodos = function() {
var todo = {
body: $scope.newTodoText,
completed: false
}
// push todo to scope
$scope.todos.push(todo);
// push to laravel
$http.post('todos', todo);
}
$scope.deleteTodo = function (todo) {
// Save index into variable
var index = $scope.todos.indexOf(todo);
if (index != -1) {
// Remove todo-item from array
$scope.todos.splice(index, 1);
}
// Now remove todo-items from laravel
$http.delete('todos/'+todo.id);
}
}
And here is my index.php
<body ng-controller="TodosController">
<div class="container">
<h1><i class="fa fa-home"></i>List</h1>
<input type="text" class="form-control" ng-model="search" placeholder="Search all Todos">
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>Body</th>
<th>Delete</th>
<th>Updated at</th>
</tr>
</thead>
<tbody ng-repeat="todo in todos | filter:search">
<tr>
<td>{{ todo.id }}</td>
<td>
<input type="checkbox" ng-model="todo.completed">
{{ todo.body }}
</td>
<td><a class="btn-danger btn-xs" ng-click="deleteTodo(todo)"><i class="fa fa-ban"></a></i></td>
<td>{{ todo.updated_at }}</td>
</tr>
</tbody>
</table>
<form ng-submit="addTodos()" class="form-inline">
<div class="form-group">
<input type="text" class="form-control" id="" placeholder="Add Todo" ng-model="newTodoText">
</div>
<button type="submit" class="btn btn-success">Add Todo</button>
</form>
</div>
<!-- jQuery -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Bootstrap JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<!-- AngularJS -->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0-beta.13/angular.min.js"></script>
<!-- Custom Javascript -->
<script src="js/main.js"></script>
</body>
And here is my TodosController in Laravel:
class TodosController extends \BaseController {
/**
* Display a listing of the resource.
* GET /todos
*
* @return Response
*/
public function index()
{
//
return Todo::all();
}
public function store()
{
//
// Todo::create(Input::all());
$body = Input::get('body');
$completed = Input::get('completed');
Todo::create([
'body' => $body,
'completed' => $completed
]);
}
public function destroy($id)
{
//
return Input::all();
}
}
