javascript - AngularJS RESTful Web 服务 - 从表中删除行

Question

我需要从表中删除一行，但我不想重新加载或刷新所有表来查看更新的行。

var demoApp = angular.module("demoApp", ["ngResource"]);

// Controller
demoApp.controller("categoryController", function($scope,   deleteCategorieService, categoriesService){
    $scope.categories = categoriesService.query();

    $scope.deleteCategory = function(id){
        deleteCategoryService.deleteCategory({id: id});
        // I want to avoid this method to refresh my table.
        // $scope.categories = categoriesService.query();
    }; 
 });

// Factories
demoApp.factory("deleteCategorieService", function($resource){
    return $resource("/demopro/deleteCategory/:id", {}, {
        deleteCategory: {
            method: "DELETE",
            params: {id: "@id"}
        }
    });
});

demoApp.factory("categoriesService", function($resource){
    return $resource("/demopro/categories", {}, {
        listAllCategories : {
           method: "GET",
           isArray: true
        }
    });
});

我怎样才能做到这一点？

Answer 1

您仍然需要调用服务器来删除该项目，但是，为了简单地将其从 View 中删除而不从服务器重新加载整个列表，请循环遍历 $scope.categories 查找要删除的项目的 id ，找到后，从数组中删除。

var i = $scope.categories.length;
while (i > 0) {
  if ($scope.categories[i].id === id) {
    $scope.categories.splice(i, 1);
    break;
  }
  i--;
}

你也可以做一个我通常做的正循环，但最近我被告知这个从后到前的循环应该要快得多。 YMMV。

 for (var i = 0; i < $scope.categories.length; i++) {
   if ($scope.categories[i].id === id) {
     $scope.categories.splice(i, 1);
     break;
   }
 }

如果您在 View 中使用双向绑定(bind)，则 HTML 应该会更新，而不会包含您刚刚删除的项目，而无需重新查询整个集合。