如何在AngularJS中刪除后自動加載/刷新視圖數據？

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函數 ，您可以從中刪除數據中的元素。

有時切片不起作用。 所以希望這會有用。

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

        });
};