使用angular删除记录

时间:2015-09-19 08:54:55

标签: angularjs laravel-5

问题

您好!我想用angular删除记录。所以这必须是这样的:我点击按钮" X" (删除)和记录必须删除。

我现在要做什么

我不知道一切是否正确,但有我的代码:

HTML

<div ng-repeat="lists in listsdata.lists">
                    <div id="DIV_24" close-on-outside-click="div.popup_information">
                        <button ng-click="lists.show = !lists.show" id="MORE_BUTTON">:</button>
                        <div class="popup_information" ng-show="lists.show">

                                <button id="DELETE_BUTTON" ng-click="del_list()">X</button>

                            <a href="">
                                <button id="EDIT_BUTTON">E</button>
                            </a>
                        </div>
                        <a href="#/{{lists.id}}">
                            <div id="DIV_25">
                                {{lists.name}}
                            </div>
                            <div id="DIV_26">
                            </div>
                    </div></a>
                </div>

myApp.controller('listsController', ['$scope', '$log', '$http',
    function($scope, $log, $http){

        $http({
            method: 'GET',
            url: 'http://localhost/anydocopy/public/lists'
        })
            .success(function (d) {
                console.log(d);
                $scope.listsdata = d;
            });

        $scope.key = function($event){
            console.log($event.keyCode);
            if ($event.keyCode == 13) {
                var list = {
                    name: $scope.listname
                };
                $scope.listname = '';
                  $http({
                    method: 'POST',
                    url: 'http://localhost/anydocopy/public/lists',
                    data: list
                })
                    .success(function () {
                        console.log('true');
                        $http({
                            method: 'GET',
                            url: 'http://localhost/anydocopy/public/lists'
                        })
                            .success(function (d) {
                                console.log(d);
                                $scope.listsdata = d;
                            });
                    })
                    .error(function () {
                        console.log('false');
                    });
            }};

        $scope.del_list = function () {
            $http({
                method: 'DELETE',
                url: 'http://localhost/anydocopy/public/lists/'+ $scope.listsdata.lists.id
            });
            console.log($scope.listsdata.lists)
        }

      }]);

laravel controller

public function delete($id)
{
    $response['lists'] = Lists::findorfail($id)->delete();

    return Response($response, 201);
}

laravel route

Route::delete('lists/{id}', 'ListsController@delete');

所以现在当我点击按钮时,我无法在agular函数中设置正确的url,因为我无法从$ scope.listsdata获取该ID。我可以获取所有数组,但是如何只获得id我想?因此,如果我点击按钮列表中id为1的内容,那么在angular函数中必须像method = delete和url = url + id一样工作。怎么做,请帮忙。

2 个答案:

答案 0 :(得分:2)

将您要删除的内容作为参数传递。并将lists重命名为list,因为它代表一个列表:

<div ng-repeat="list in listsdata.lists">
    ...
    <button ng-click="del_list(list)">X</button>

$scope.del_list = function(listToDelete) {
    $http({
        method: 'DELETE',
        url: 'http://localhost/anydocopy/public/lists/'+ listToDelete.id
    });
}

答案 1 :(得分:0)

在要删除的ng-click功能中传递参数,如

    <div ng-repeat="list in listsdata.lists">
    ...
    <button ng-click="del_list(list)">X</button>
</div>

删除功能看起来像是

    $scope.del_list = function(selectedItem) {
    $http({
        method: 'DELETE',
        url: 'http://localhost/anydocopy/public/lists/'+ selectedItem.id
    });
console.log($scope.listsdata.lists)
}
相关问题