W Angularjs, jak zaktualizować dane tabeli po usunięciu z niej wiersza

Question

Używam angularjs do wywoływania Asp.net Web API. Po usunięciu wiersza z tabeli?

Również nie znalazłem rozwiązania w w3schools.

Mój kod 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> 

Moja angularjs kod

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

} 

Szukałem w Stackoverflow znalazłem niektóre z nich, gdzie nie działa dla mnie, oni mylić mnie.

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

Answer 1

Po pierwsze, obsługa żądań serwera w kontrolerze jest złym pomysłem. Z reguły korzystaj z usług do delegowania połączeń na serwer i używaj kontrolera do "przyklejania" swoich modeli do widoku.

Istnieje kilka kwestii w kodzie, powinno to wyglądać mniej więcej tak:

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

Nawet jeśli połączenie z serwerem powiodło się, nigdy nie zaktualizowane model front-end. Co przeczytałeś na inne tematy dotyczące $ scope.refresh(), przypuszczam, że ma na celu pobierania danych ponownie, tak jak poniżej:

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

Więc obciążenie odświeżyć widok, trzeba aktualizować swój model .

$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

Wystarczy usunąć użytkownika z tablicy:

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

także, dlaczego pobierania identyfikatora użytkownika, gdy masz już to ?:

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

Answer 3

dwa rozwiązania: raz dokonałeś usunięcia, usuń użytkownika z tablicy użytkowników, wykonując plaster:

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

Możesz uzyskać indeks użytkownika, używając $ index w powtórzeniu ng, ale ponieważ twój kod może być asynchroniczny, nie jest to zalecane.

Można też po prostu uzyskać inny interfejs API po usunięciu usunięcia.

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

... Ale co, jeśli osoba, która używa aplikacji jest usuwanie użytkowników szybciej niż Twój API jest w stanie?

Pierwsze rozwiązanie na pewno się nie powiedzie, a drugie z trudem utrzyma DOM w czystości, o ile wszystkie żądania wróciły w takiej samej kolejności, w jakiej zostały wysłane.
Jednym z rozwiązań jest zapobieganie wszelkim zgłoszeniom do interfejsu API, o ile inne są już w toku.

W JavaScript jako Funkcje są w rzeczywistości obiekty wykonywalne mogą mieć właściwości. Dlatego dodamy właściwość isBusy do funkcji DeleteUser, aby wiedzieć, kiedy jest ona już przetwarzana.

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

EDIT:

kod Aktualizacja używać .then() na $http obietnicy obiektu jako .success() jest teraz przestarzała.