处理从 $resource 返回的集合

Question

我有一个名为 Message 的服务，可以从 API 发送 returns 条消息。它看起来像这样：

app.factory('Message', function($resource) {
  return $resource('http://localhost:3000/messages/:id');
});

它工作正常，我在我的控制器中使用它来将消息分配到我的范围：

app.controller('MessagesCtrl', function($scope, Message) {
  $scope.messages = Message.query();
}

当我在浏览器的控制台中登录 $scope.messages 时，如下所示：

[$promise: Promise, $resolved: false]
  0: Resource
  1: Resource
  2: Resource
  3: Resource
  $promise: Promise
  $resolved: true
  length: 4
  __proto__: Array[0]

到目前为止，一切顺利 - 四个消息。我希望能够专门操作此集合中的元素，例如删除、更新和添加元素。

基于this answer，这是我尝试删除具有特定 id 的邮件的方法：

$scope.messages = $scope.messages.filter(function(obj) {
  return (object.id != 6);
});

但这会将 $scope.messages 变成一个空集合。我如何通过 id 从这个资源集合中删除特定元素？另外，我如何用另一个对象替换此集合中的现有元素？

Answer 1

$resource 自动扩展 promise（作为一种方便的方法）并将响应附加到返回的对象本身，这在将数据绑定到视图时非常方便（因为在 promise 解析之后运行的摘要循环将更新DOM with bound object with resolved data ), 但在直接操作数据时尤其如此，尤其是当您在数据解析之前尝试访问它时。因此，如果您想操作数据，则需要等待承诺得到解决。

即：-

   //chain through the promise.
   Message.query().$promise.then(function(messages){
      $scope.messages = messages.filter(function(obj) {
       return (obj.id != 6);
      });
   });

或者您也可以这样做（使用您现有的代码）：

  $scope.messages.$promise.then(function(messages){
     //Since you are overwriting the object here, there will no longer be a $Promise property so be careful about it when you try to chain through elsewhere after this
     $scope.messages = messages.filter(function(obj) {
       return (obj.id != 6);
      });
  });

处理从 $resource 返回的集合

Manipulate collection returned from $resource

angularjs

angular-resource