如何在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; 
             }

        });
};