Question

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

简要概述我有很多博客文章，并希望基本分页在ng-click事件上加载更多帖子（基于_id）我可以获取数据但我有一个问题更新$ scope与新取出的物体。

加载更多帖子HTML：

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

在我的角度控制器中：

// 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);
});

从返回的MongoDB对象更新Angular.js $作用域

1 个答案: