Question

我正在使用Laravel作为后端API和AngularJS用于前端的Web应用程序。我已成功从Laravel API获取数据并通过AngularJS ng-repeat显示它。现在我想要一个显示在表中的每条记录的删除按钮。当用户单击该删除按钮时，它应删除所单击的记录。

我做了以下尝试，这是完美的工作。但是当我点击删除按钮它会从数据库删除记录但是它没有刷新记录列表时出现问题，而不是刷新它只是显示标题表的标题，没有别的。当我从浏览器手动刷新它然后它显示回记录列表。我想在删除记录后自动加载列表。

控制台错误：控制台错误：DELETE http://localhost/ngresulty/public/api/result/50?id=50 500（内部服务器错误）

删除前（列表）：

删除场景后：

MainCtrl.js

$scope.deleteResult = function(id) {
        $scope.loading = true; 

        Result.destroy(id)
                .success(function(data) {
                    // if successful, we'll need to refresh the comment list
                  Result.get()
                        .success(function(data) {
                            $scope.students = data;
                            $scope.loading = false;
                        });


                });
};

MyAppService.js

angular.module('myAppService', [])

    .factory('Result', function($http) {
        return {
            get : function() {
                return $http.get('api/result');
            },
            show : function(id) {
                return $http.get('api/result/' + id);
            },
            save : function(resultData) {
                return $http({
                    method: 'POST',
                    url: 'api/result',
                    headers: { 'Content-Type' : 'application/x-www-form-urlencoded' },
                    data: $.param(resultData)
                });
            },
            destroy : function(id) {
                return $http.delete('api/result/' + id,{params: {id}});
            }
        }

});

App.js

var myApp = angular.module('myApp', ['mainCtrl', 'myAppService']);

结果视图

<table class="table table-striped">
                            <thead>
                              <tr>
                                <th>Roll No</th>
                                <th>Student Name</th>
                                <th>Father Name</th>
                                <th>Obtained Marks</th>
                                <th>Total Marks</th>
                                <th>Percentage</th>
                                <th>Delete</th>
                              </tr>
                            </thead>
                            <tbody ng-hide="loading" ng-repeat="student in students | filter:searchText">
                                  <tr> 
                                    <td>@{{ student.rollno }}</td>
                                    <td>@{{ student.name }}</td>
                                    <td>@{{ student.fname }}</td>
                                    <td>@{{ student.obtainedmarks }}</td>
                                    <td>@{{ student.totalmarks }}</td>
                                    <td>@{{ student.percentage }}</td>
                                    <td>
                                        <a href="#" ng-click="deleteResult(student.id)" class="text-muted btn-danger btn-lg">Delete</a></p>
                                    </td>

                                  </tr>
                             </tbody>
</table>

我尝试但不工作的内容：

 $scope.deleteResult = function(id) {
        $scope.loading = true; 

        Result.destroy(id)
            .success(function(data) {

                // do something with data if you want to
                $scope.students.splice(id, 1);

            });
    };

解决方案： 每当您收到500内部错误时，问题将来自服务器端。问题在于服务器端我所做的就是将我的销毁服务改为

 destroy : function(id) {
                return $http.delete('api/result/' + id);
}

并且在laravel控制器中我返回一个bool值为true但我将其更改为ID

return \Response::json($studentid);

因为我需要那个ID才能获得成功，然后它就像魅力一样。

Answer 1

问题是Array splice方法将数组的索引作为第一个参数，并且您提供的是Student Id，它不是数组索引。您必须在数组中找到student id的索引，然后将其传递给splice方法

$scope.findWithAttr= function(array, attr, value) {
for(var i = 0; i < array.length; i += 1) {
    if(array[i][attr] === value) {
        return i;
    }
} }

现在你可以调用这个函数来销毁成功块。

$scope.deleteResult = function(idToDelete) {
    $scope.loading = true; 

    $http.delete('api/result/' + id,{params: {id}}); }
        .then(function(data) {

            var index=$scope.findWithAttr($scope.students,id,idToDelete);
            $scope.students.splice(index, 1);

        });
};

Answer 2

您正在错误地拼接数据。

这样做是为了拼接destroy success块中的数据。

var del_index = $scope.students.findIndex(function(d){return d.id == id});
if(del_index>0)//if index of the id to be removed found
  $scope.students.splice(del_index, 1);

Answer 3

有一个名为lodash

的javascript库

此库提供remove function，您可以从中删除数据中的元素。

有时切片不起作用。所以希望它能有效。

 $scope.deleteResult = function(id) {
    $scope.loading = true; 

    Result.destroy(id)
        .success(function(data) {

            // do something with data if you want to
            _.remove($scope.students,function(student){
             return id==studednt.id; 
             }

        });
};

如何在AngularJS中删除后自动加载/刷新视图数据？

3 个答案: