事件發生后如何自動刷新angularjs中的表記錄

Question

我正在使用Laravel作為后端API和AngularJS作為前端的Web應用程序。 我已經從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>

控制台錯誤：DELETE 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（）; 活動結束時的聲明