如何在将新项目POST到服务器后更新ng重复

How to update ng-repeat after POST of new items to server

本文关键字：服务器 更新 ng 重复 POST 新项目      更新时间：2023-09-26

假设我有一个项目列表，该列表由通过加载JSON对象的非常简单的服务从服务器检索的数据填充。类似这样的东西：

MyApp.factory("ItemList", function($resource) {
    return $resource("/api/items", {}, {
        "get":{
            method: 'GET'
        },
        "add":{
            method: 'POST'
        }
    });
});

如果我通过POST向服务器添加一些内容到这个列表中，它会很好地工作，但我不太清楚如何在不重新加载整个页面的情况下让新项目出现在我的视图中。

我的控制器现在看起来是这样的：

MyApp.controller('ListController', function($scope, ItemList) {
    $scope.items = ItemList.query();
    $scope.addItem = function() {
        var form = {
            "item" : "Some content",
        }
        ItemList.add(form);
    };
});

这就是事情变得棘手的地方。我曾想过重写服务，将新项目推送到存储在服务中的数组中，但每个新项目在发布时都有一个由服务器添加的唯一ID。长话短说，我需要刷新整个资源，或者从服务器获取新的唯一ID（这是可能的，API支持它），并将组合数据添加到列表中。

我不想为此使用任何JQuery。Angular完成列表更新的方式是什么？

附加数据：有一件事可能会有所帮助，那就是当一个项目发布到服务器时，它会用项目的内容和唯一ID进行响应。然而，我不确定如何从Angular角度获取并将其添加到列表中。

截至2015年11月23日的解决方案多亏了下面的答案，我制定了一个有效的CRUD ish（"ish"，因为应用程序的操作方式，CRUD不适合我的需求）解决方案，我在下面解释。

首先，这是我的新资源：

// Added $http for ease of getting JSON results
factory("ItemList", function($resource, $http) {
    var service = {};
    // Simplified $resource object for querying. Posts handled by $http now.
    service.items = $resource("/api/items:id");
    // Make the items an array accessible from inside the service.
    service.list = service.items.query();
    service.add = function(item) {
        $http.post('/api/items', item)
        .success(function(data) {
            service.list.push(data);
        })
        .error(function(data) {
            console.log(data);
        });
    }
    return service;
});

然后我所要做的就是更换我的控制器，就像这样：

MyApp.controller('ListController', function($scope, ItemList) {
    // Grab the array from the service instead of querying the resource
    $scope.items = ItemList.list;
    $scope.addItem = function() {
        var form = {
            "item" : "Some content",
        }
        ItemList.add(form);
    };
});

这工作得很好，避免了我需要重新加载整个页面，而且速度非常快。我将在未来尝试改进这一点——希望能让它变得更CRUD，但与此同时，这是可行的。我希望其他人觉得它有用。

如果您确信服务器端的数据没有变化（参考Lazarev Alexandr的评论），我会将新数据附加到现有列表中。

$http.post('/someUrl', data).then(
  function(data){ // on success
    $scope.yourlist.push(data);
  }, 
  function(data){ // on error
    console.log(data);
  });

该服务将返回一个promise，然后当POST完成时，它应该返回新返回的项目，您可以将其添加到当前列表中。
我可能错了，但我觉得这有一种稍微更"角度"的方法，不重新加载现有数据。

Web Api:

public class InfoController : ApiController
    {
        [HttpPost]
        public IHttpActionResult AddInfo([FromBody]InfoClass info)
        {
            object o = new object();
            return Json(o);
        }
    }
    public class SomeClass
    {
        public string firstname { get; set; }
        public string lastname { get; set; }
    }

您应该更好地刷新整个资源的主要原因是：如果您在客户端上复制数据列表构建的逻辑，那么一旦服务器上的逻辑发生更改，您可能会遇到一些问题。

相关文章：