从返回的 MongoDB 对象更新 Angular.js $scoped

Question

我目前一直在 MEAN 堆栈中构建一个 CRUD 应用程序。但是我遇到了一个我似乎无法解决的潜在问题。

简要概述是我有许多博客文章，并希望基本分页在 ng-click 事件上加载更多文章（基于 _id）我可以获取数据，但我在更新 $scope 时遇到了问题新获取的对象。

加载更多帖子 HTML：

<div ng-click="loadMoreBlogPosts(post._id)" ng-show="$last">Load more</div>

在我的 Angular 控制器中：

// All Blog Posts (This works fine)
$scope.allPosts = function() {
    $scope.posts = Blog.Posts.query();
}

// Load More Blog Posts 
$scope.loadMorePosts = function(id) {
    /* Current Issue */
    Blog.MorePosts.query({id:id}, function(data) { 
       $scope.posts.push(data) /* This doesn't work */
    })
}

角度模型：

return {

        Posts: $resource('/api/blog', {}, { 

            query: { method: 'GET', isArray: true },
            add: { method:'POST', isArray:false },

        }),

        MorePosts : $resource('/api/moreposts/:id', {}, { 

            query: { method: 'GET', isArray: true, params:{ id:'@id' } }

        }),

        Post: $resource('/api/blog/post/:id', {}, { 

            query: { method: 'GET', isArray: true, params:{ id:'@id' } },
            add: { method:'POST', isArray:false },
            update: { method:'PUT', isArray:false, params:{ id:'@id' } },
            delete: { method:'DELETE', params:{ id:'@id' } }

        }),
} 

Mongoose/MongoDB/节点控制器：

exports.posts = function(req, res, next) {

    // Blog Posts
    Blog.find()
        .sort('-created')
        .limit(3)
        .find(function (err, posts) {
        // Check
        if(err) {
            // Error
            return next(err)
        } else {
            // Success
            res.json(posts) 
        }
    })

};


exports.moreposts = function(req, res, next) {

    //console.log(req.params.id);
    // Blog Posts
    Blog.find({"_id": { "$lt": req.params.id }})
        .sort('-created')
        .limit(2)
        .find(function (err, posts) {
        // Check
        if(err) {
            // Error
            return next(err)
        } else {

            // Success
            res.json(posts) 
            console.log(posts);/* Showing in Terminal */

        }
    })

};

这让我困惑了几个小时。我确定我必须忽略一些相当简单的事情，或者事实上我的逻辑完全不正确（我希望是前者）任何帮助或指导将不胜感激。

附带说明，如果 loadMoreBlogPosts 函数被触发，则如下：

$scope.posts = Blog.MorePosts.query({id:id})

上面将显示更改 $scope.posts 以显示从 Node/mongo 控制器返回的对象。这说明逻辑没问题，我只需要想办法将数据追加到$scope.posts，而不是替换它。

Answer 1

以下内容：

$scope.posts.push(data);

将新数组添加到现有数组的末尾，使其成为嵌套数组。

你想要的是将旧数组与新数组合并，而不是替换旧数组。

以下应该有效：

Blog.MorePosts.query({id:id}, function(data) { 
  $scope.posts.push.apply($scope.posts, data);
});

如果您使用track by，例如：

<div ng-repeat="post in posts track by post.id">

那么你是否重新创建原始数组然后可以使用concat就没有关系了：

Blog.MorePosts.query({id:id}, function(data) { 
  $scope.posts = $scope.posts.concat(data);
});