我在AngularJS应用中使用Restangular。我有一个表,每个项目都有一个删除链接。我想删除该项目并自动删除该行。但事情是它只从DB中删除。我如何重构事物以便DOM自动更新?
// The controller
angular.module('myApp').controller('ManageCtrl', function($scope, Restangular) {
$scope.delete = function(e) {
Restangular.one('product', e).remove();
};
Restangular.all('products').getList({}).then(function(data) {
$scope.products = data.products;
$scope.noOfPages = data.pages;
});
});
// The view
<li ng-repeat="product in products">
<a href="#" ng-click="delete(sheet._id)"></a>
</li>
我也想找到一个这样的例子 - 即使使用Angular资源。所有管理/数据表演示似乎都来自静态数据。
答案 0 :(得分:19)
根据Restangular https://github.com/mgonto/restangular#restangular-methods,他们提到你应该使用原始项目并使用它运行一个动作,所以在你的HTML代码中你应该:
<li ng-repeat="product in products">
<a href="#" ng-click="delete(product)"></a>
</li>
然后在你的控制器中:
$scope.delete = function( product) {
product.remove().then(function() {
// edited: a better solution, suggested by Restangular themselves
// since previously _.without() could leave you with an empty non-restangular array
// see https://github.com/mgonto/restangular#removing-an-element-from-a-collection-keeping-the-collection-restangularized
var index = $scope.products.indexOf(product);
if (index > -1) $scope.products.splice(index, 1);
});
};
请注意,他们使用 underscore.js而不是,这将从数组中删除元素。我想如果他们在自述文件页面中发布该示例,则意味着.remove()
函数不会从集合中删除原始项目。这是有道理的,因为并非您要删除的每个项目都要从集合本身中删除。
此外,如果DELETE $HTTP
请求失败,会发生什么?您不想删除该项目,并且必须确保在代码中处理该问题。
答案 1 :(得分:2)
就我而言,上述情况并非如此。我必须做以下事情:
$scope.changes = Restangular.all('changes').getList().$object;
$scope.destroy = function(change) {
Restangular.one("changes", change._id).remove().then(function() {
var index = $scope.changes.indexOf(change);
if (index > -1) $scope.changes.splice(index, 1);
});
};