CODEWITHSUNDEEP
javascriptphpangularjslaravel
LoveAndHappiness
LoveAndHappiness

Reputation: 10135

AngularJS Deleting Item of Array from Laravel Database

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:

Screenshot of the successful delete response

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();
    }

}

Upvotes: 1

Views: 1356

Answers (1)

TunaMaxx
TunaMaxx

Reputation: 1769

You aren't removing the record in your TodosController destroy() method. Try this:

public function destroy($id)
{
    ToDo::destroy($id);
}

Upvotes: 1

Related Questions