Fatal编程技术网
  • javascript/
  • Javascript 如何在AngularJS中删除后自动加载/刷新视图数据？

Javascript 如何在AngularJS中删除后自动加载/刷新视图数据？

javascript angularjs laravel laravel-5

Javascript 如何在AngularJS中删除后自动加载/刷新视图数据？,javascript,angularjs,laravel,laravel-5,Javascript,Angularjs,Laravel,Laravel 5,我正在开发一个Web应用程序，使用Laravel作为后端API，使用AngularJS作为前端。我已经成功地从LaravelAPI获取数据，并通过AngularJS ng repeat显示它。现在，我希望为表中显示的每条记录都有一个删除按钮。当用户单击该删除按钮时，应删除已单击的记录 我做了以下尝试，效果很好。但当我单击“删除”按钮时，问题出现了。它从数据库中删除记录，但不是刷新记录列表，而是只显示表的标题，而没有其他内容。当我从浏览器手动刷新它时，它会显示回记录列表。我想在删除记录后自动加载列

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

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

控制台错误：控制台错误：删除 500（内部） 服务器错误）

删除前（列表）：

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

            });
    };
删除场景后：

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

            });
    };

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


                });
};

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

});

var myApp = angular.module('myApp', ['mainCtrl', 'myAppService']);
MyAppService.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;
                        });


                });
};

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

});

var myApp = angular.module('myApp', ['mainCtrl', 'myAppService']);
App.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;
                        });


                });
};

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

});

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控制器中，我返回一个布尔值true，但我将它改为ID

return\Response:：json（$studentid）


因为我需要那个ID才能成功返回，然后它就像一个符咒一样工作。
你把数据拼接错了

执行此操作以拼接
销毁成功
块中的数据


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



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


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



有一个javascript库，名为

此库提供了从数据中删除元素的位置

有时切片不起作用。所以试试这个，希望它能起作用


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

        });
};



还是相同的错误
DELETEhttp://localhost/ngresulty/public/api/result/53?id=53 500（内部服务器错误）
@Cyril我的新代码现在看起来像这样
$scope.deletesult=function（id）{$scope.loading=true；Result.destroy（id）.success（function（data）{var del_index=$scope.students.findIndex（函数（d）{return d.id==id}）；if（del_index>0）//if要删除的id的索引找到了$scope.students.splice（del_index，1）；}；
即使它没有发出警报，也意味着永远不会调用正确的销毁成功？
$scope.deletesult=函数（idToDelete）{$scope.loading=true；Result.destroy（idToDelete）.success（函数（数据）{alert（'hello'）；}）；}；
http://localhost/ngresulty/public/api/result/53?id=53
给出500状态意味着这是一个服务器问题。删除ajax成功块将永远不会被调用。兄弟，这与角度无关。你必须更改服务器端代码，以修复500错误。太好了！问题是服务器端。我所做的只是更改我的服务到
destroy:function（id）{return$http.delete（'api/result/'+id）；}
在laravel控制器中，我返回一个bool值true，但我将其更改为id
return\Response:：json（$studentid）；
因为我需要该ID才能成功返回，然后它像一个符咒一样工作。控制台中出现同样的错误，请阅读我的问题。删除操作正常，但视图不会自动刷新。即使它没有发出警报，也意味着销毁成功从未被正确调用？
$scope.deleteResult=函数（idToDelete）{$scope.loading=true；Result.destroy（idToDelete）.success（函数（数据）{alert（'hello'）；}）}；
Yes它没有被调用。也许你应该试试。然后（函数（res）{}）而不是.successAlso，如果你看一下delete服务
destroy:function（id）{return http.delete（'api/Result/'+id，{params:{id}})}
这是否正确？正如您所说，服务器在删除记录后正在响应您的内部服务器错误。如果服务器引发任何异常，您的服务器响应永远不会出现在success方法中。它必须出现在.error（）方法中。yea当我在控制器中的代码是
return\response:：json时（'success'=>'true'）；
然后列表没有刷新，但当我将其更改为
return\Response:：json（$studentid）；
将学生ID发送到API时，它工作了。可能是我错了，但我做了更改，然后它工作了，在这些更改之前，我尝试插入警报（'message'）。成功，但它不工作。