在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

两种解决方案：执行删除后，通过切片从用户数组中删除用户：

$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 中，函数实际上是可执行对象，它们可以具有属性。因此，我们将在 DeleteUser 函数中添加一个isBusy 属性，以了解它何时已经在处理。

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

编辑：

更新代码以在 $http 承诺对象上使用 .then() 作为 .success() 现在已弃用。

Answer 3

只需从数组中删除用户：

// Find index of the user
var index = $scope.users.indexOf(id);
// Remove user from array
$scope.users.splice(index, 1);

另外，你为什么要获取用户的 id，而你已经有了它？：

$scope.DeleteUser = function (id) {
    $http.delete('/api/users/' + id).success(function (data) {
        var index = $scope.users.indexOf(id);
        $scope.users.splice(index, 1);
    });
}