如何使用AngularJS删除一个项目后刷新项目列表?
我是AngularJS领域的新手,我正在尝试将其与ASP.NET Web API一起使用。 我现在正在努力使用删除function。 用户应该能够从项目列表中删除项目,并且当他成功删除项目时,应该在删除后立即更新(或刷新)列表。 我已经实现了删除function,但是删除后列表没有更新,我不知道为什么。
这是Web API中的删除function代码:
// DELETE api//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' } } }) });
那么如何在任何成功删除操作后立即更新项目列表?
这是因为你的caseFactory.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(); }); };
- AngularJS:如何获得系统远程?
- Angular路由模板URL是否支持ASP.Net MVC 5项目中的* .cshtml文件?
- 除非Fiddler正在运行,为什么IE11会创建空白的post请求?
- 是否可以在ASP.NET Web API和SPA中使用基于cookie的身份validation?
- 在asp.net Web api和angular js中使用的身份validation方法
- AngularJS – 哪个是好的WCF Rest或Web API
- 405方法不允许Web API 2
- 升级到SignalR-2.0.0-beta2时未生成/ signalr / hubs
- HttpContext.Current.Items 无效,因为AngularJS调用创建新会话