Angularjs changes are displayed immediately after deleting promise data in the loop

When using Restangurlar to interact with the background API, delete a record, but it is displayed directly on the page. Third-party asynchronous data can not be synchronized immediately, if you want to see the results of the deletion to re-refresh the page is not cool, Google a find a solution.

The original JS code is as follows:

. Controller (' Hostctrl ', [' $scope ',' Restangular ', function($scope, restangular) {varBasehosts = Restangular.all (' Api/host ');    $scope. Hosts=basehosts.getlist (). $object; $scope. del= function(host,uuid) {Restangular.one (' Api/host ', uuid). Remove ()}}])

Html:

<tbody><tr ng-repeat="host in Hosts|filter:searchtext">    <TD><a href="#" ng-if="host." Uuid!=nil " ng-click=" Del (host,host. UUID) ">Delete</a> </td>    <TD class="center">{{host.} Hostname}}</td>    <TD class="center">{{host.} IP}}</td>    <TD><p ng-repeat="Tcp_port in Host". Tcp_list ">{{Tcp_port}}</P></td>    <TD><p ng-repeat="Udp_port in Host". Udp_list ">{{Udp_port}}</P></td></tr></tbody>

The modified JS code is as follows:

. Controller (' Hostctrl ', [' $scope ',' Restangular ', function($scope, restangular) {varBasehosts = Restangular.all (' Api/host ');    $scope. Hosts=basehosts.getlist (). $object; $scope. del= function(host,uuid) {Restangular.one (' Api/host ', uuid). Remove (). Then ( function() {varindex= $scope. Hosts.indexof (host);if(Index >-1) $scope. Hosts.splice (Index,1); })        }}])

Angularjs changes are displayed immediately after deleting promise data in the loop