使用AngularJS刪除一項后如何刷新項列表？

Question

我是AngularJS領域的新手，並且嘗試與ASP.NET Web API結合使用。 我現在正在努力使用刪除功能。 用戶應該能夠從項目列表中刪除項目，並且當他成功刪除項目時，該列表應在刪除后立即更新（或刷新）。 我已經實現了刪除功能，但是刪除后列表沒有更新，我也不知道為什么。

這是Web API中刪除功能的代碼：

// DELETE api/<controller>/5
        public void Delete(int id)
        {
            itemRepository.DeleteItem(id);
        }

這是AngularJS控制器代碼：

app.controller('itemsController', ['itemsFactory', 'itemFactory', function (itemsFactory, itemFactory) {

        var vm = this;
        vm.message = "Welcome to Items Page";

        vm.Items= itemsFactory.query();

        // callback for ng-click 'deleteItem':
        vm.deleteItem = function (aId) {
            itemFactory.delete({ id: aId });
            vm.Items= itemsFactory.query();
        };
}]);

這是AngularJS服務代碼：

app.factory('itemsFactory', function ($resource) {
    return $resource('/api/items', {}, {
        query: { method: 'GET', isArray: true },
        create: { method: 'POST' }
    })
}); 

app.factory('itemFactory', function ($resource) {
    return $resource('/api/items/:id', {}, {
        show: { method: 'GET' },
        update: { method: 'PUT', params: { id: '@id' } },
        delete: { method: 'DELETE', params: { id: '@id' } }
    })
});

那么，如何在成功執行刪除操作后立即獲取更新的項目列表？

Answer 1

那是因為您的情況下itemFactory.delete是異步運行的$ resource對象。 因此，問題出在以下各行：

// callback for ng-click 'deleteItem':
vm.deleteItem = function (aId) {

    // You send request to the server
    itemFactory.delete({ id: aId });

    // You don't get response from the server yet, so your item hasn't deleted.
    vm.Items= itemsFactory.query();
};

因此，要完成所有操作，需要像下面這樣在itemFactory.delete回調中更新vm.Items：

vm.deleteItem = function (aId) {
    itemFactory.delete({ id: aId }, function () {
        // Update your items after you get success response from the server after deleting
        vm.Items= itemsFactory.query();
    });
};