javascript - 如何在 AngularJS 中删除后自动加载/刷新 View 数据？

Question

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

我做了以下尝试，效果很好。但是当我单击删除按钮时出现问题，它从数据库中删除了记录但它没有刷新记录列表，而不是刷新它只是显示表头标题，仅此而已。当我从浏览器手动刷新它时，它会显示回记录列表。我想在删除记录后自动加载列表。

Console Error : Console Error: DELETE http://localhost/ngresulty/public/api/result/50?id=50 500 (Internal Server Error)

删除前(列表):

删除场景后:

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']);

结果 View :

<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 Controller 中，我返回了一个 bool 值 true 但我将其更改为 ID

返回\Response::json($studentid);

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

Answer 1

问题是数组拼接方法将数组的索引作为第一个参数，而您提供的不是数组索引的学生 ID。你必须在数组中找到学生id的索引，然后将它传递给拼接方法

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

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

$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);

        });
};