AngularJS从Laravel数据库中删除数组项

时间:2014-08-08 20:57:51

标签: javascript php angularjs laravel

我想从laravel数据库中删除一个项目。该应用程序是一个简单的Todo-List。

因此我的main.js中有一个TodosController,它是AngularJS的handeld,我正在尝试为Laravel创建一个Rest API来将我的数据存储在一个mysql数据库中。

检索数据有效。还要将新项目存储到数组中。 显然下一步是找出如何删除项目。虽然我设法从范围中删除了项目,但我不能让它们从我的数据库中消失。

以下是我从控制台获得的回复:

Screenshot of the successful delete response

这是我的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);
    }

}

这是我的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>

这是我在Laravel的TodosController:

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

}

1 个答案:

答案 0 :(得分:1)

您没有删除TodosController destroy()方法中的记录。试试这个:

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