在Angularjs中,如何在从中删除行后更新表数据

Question

我使用angularjs来调用Asp.net Web API.从表中删除一行后？

我也没有在w3schools找到解决方案.

我的HTML代码

 <tr ng-repeat="user in users | filter: search">
     <td>{{ user.Id }}</td>
     <td>{{ user.FullName }}</td>
     <td>{{ user.Mobile }}</td>
     <td>{{ user.Birthdate }}</td>
     <td>{{ user.Gender }}</td>
     <td>{{ user.AcademicLevel }}</td>

     <td>

我的Angularjs代码

$scope.DeleteUser = function (id) {
    UserID = $scope.users[id].Id;
    $http.delete('/api/users/' + UserID).success(function (data) {
       (function (data) {
        $scope.error = "error " + data;
    });

}

我在Stackoverflow中搜索过,我发现其中一些不适合我的地方,他们让我很困惑.

$scope.refresh()
$scope.apply();

Answer 1

首先,在控制器中处理服务器请求是个坏主意.根据经验,使用服务将调用委托给服务器,并使用控制器将模型"粘合"到视图中.

您的代码中存在一些问题,它应该如下所示:

$scope.DeleteUser = function (id) {
    var userId = $scope.users[id].Id;
    $http.delete('/api/users/' + userId)
          .success(function (data) {
             $scope.error = "error " + data;
          });
}

即使对服务器的调用成功,您也从未更新过您的前端型号.关于$ scope.refresh()的其他主题您已经阅读了什么,我认为其目的是再次获取数据,如下所示:

$scope.refresh = function(){
    $http.get('/api/users')
          .success(function(data){
               $scope.users = data;
          });
}

因此,为了刷新视图,您必须更新模型.

$scope.DeleteUser = function (id) {
    var userId = $scope.users[id].Id;
    $http.delete('/api/users/' + userId)
          .success(function (data) {
             //either this
             $scope.refresh();
             //or this
             $scope.users.splice(id,1);
          });
}

Answer 2

两个解决方案:一旦执行了删除操作,请通过执行切片从users数组中删除用户:

$scope.DeleteUser = function (index) {
    var UserID = $scope.users[index].Id;
    $http.delete('/api/users/' + UserID).then(function(del) {
        $scope.users.splice(index,1);
    });
}

您可以在ng-repeat中使用$ index来获取用户的索引,但由于您的代码可能是异步的,因此不建议这样做.

或者,您可以在解决删除后再从API中获取另一个.

$scope.DeleteUser = function (index) {
    var UserID = $scope.users[index].Id;
    $http.delete('/api/users/' + UserID).then(function(del) {
        $http.get('/api/users').then(function(data){
            $scope.users = data;
        });
    });
}

但是......如果使用您的应用程序的人正在以比API更快的速度删除用户,该怎么办？

第一个解决方案肯定会失败,只要所有请求按照它们发送的顺序返回,第二个解决方案几乎不会保持DOM清理.
一种解决方案是防止对API的任何请求,只要另一个已经挂起.

在JavaScript中,函数实际上是可执行对象,它们可以具有属性.因此,我们将向isBusyDeleteUser函数添加一个属性,以了解它何时处理.

$scope.DeleteUser = function (index) {
    if(!$scope.DeleteUser.isBusy){
        var UserID = $scope.users[id].Id;
        $scope.DeleteUser.isBusy = true;

        $http.delete('/api/users/' + UserID).then(function(del) {
            $scope.users.splice(id,1);
            $scope.DeleteUser.isBusy = false;
        });
    }
}

编辑:

更新要.then()在$httppromise对象上使用的代码,.success()现在已弃用.