事件发生后如何在angularjs中自动刷新表记录

Question

我正在开发一个 Web 应用程序，使用 Laravel 作为后端 API，使用 AngularJS 作为前端。我已成功从 Laravel API 获取数据并通过 AngularJS ng-repeat 显示它。现在我想要一个显示在表中的每条记录的删除按钮。当用户单击该删除按钮时，它应该删除单击的记录。我做了以下尝试，效果很好。但是当我单击删除按钮时会出现问题从数据库中删除记录但它不刷新记录列表，而不是刷新它只显示表的标题标题，没有别的。当我从浏览器手动刷新它时，它会显示记录列表。我想在记录被删除后自动加载列表。

总结：在删除时我想自动加载/刷新列表，但现在没有发生。

学生监督：

public function destroy($id)
    {
        $student = Student::find(Input::get('id'));
        if($student){
            $student->delete();
            return Response::json(['destroy'=>true]);
        }
    }

app.js

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

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

    });

MainCtrl.js

angular.module('mainCtrl', [])

    .controller('mainController', function($scope, $http, Result) {
        // object to hold all the data for the new comment form
        $scope.resultData = {};

        // loading variable to show the spinning loading icon
        $scope.loading = true;

        // get all the comments first and bind it to the $scope.comments object
        Result.get()
            .success(function(data) {
                $scope.students = data;
                $scope.loading = false;
            });


        // function to handle submitting the form
        $scope.submitResult = function() {
            $scope.loading = true;

            // save the comment. pass in comment data from the form
            Result.save($scope.resultData)
                .success(function(data) {
                    $scope.resultData = {};
                    // if successful, we'll need to refresh the comment list
                    Result.get()
                        .success(function(getData) {
                            $scope.students = getData;
                            $scope.loading = false;
                        });

                })
                .error(function(data) {
                    console.log(data);
                });
        };

        // function to handle deleting a comment
        $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(getData) {
                            $scope.students = getData;
                            $scope.loading = false;
                        });

                });
        };

    });

查看

 <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>

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

Answer 1

我的猜测是Result.get() 调用没有返回正确的数据。您可能想要检查该端点。

虽然您知道在删除时会发生成功事件，但无需再次调用，您可以更改范围然后不再调用您的后端，即：

    // function to handle deleting a comment
    $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);

            });
    };

Answer 2

如果你得到 500 服务器错误Result.destroy() 调用错误函数。不成功

    $scope.loading = true; 

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

                })
                .error(function(data) {
                    // its not successful but i want call Result.get() anyway
                    Result.get()
                        .success(function(getData) {
                            $scope.students = getData;
                            $scope.loading = false;
                        });

                }));
        };

Answer 3

试着放 $scope.$apply(); 活动结束声明