在另一个ng-repeat中重复ng-repeat - 在http服务调用上更新

时间:2015-06-02 08:02:26

标签: angularjs angularjs-scope angularjs-ng-repeat ng-repeat

我有一个帖子列表,每个帖子都有关联的评论。我有单独的Web服务来列出帖子和评论。所以我这样做:

 <li class="timeline-item" ng-repeat="post in controller.myposts">
                                <div class="panel panel-white">
                                    <div class="panel-body">
                                        <div class="timeline-item-header">
                                            <img src="{{post.userImageURL}}" style="height: 50px" alt="">
                                            <p>{{post.userName}} <span>Posted a Status</span></p>
                                            <small>{{post.created}}</small>
                                        </div>
                                        <div class="timeline-item-post">
                                            <p>{{post.message}}</p>
                                            <div class="timeline-options">
                                                <a href="#"><i class="icon-like"></i> Like (7)</a>
                                                <a href="#"><i class="icon-bubble"></i> Comment (2)</a>
                                                <a href="#"><i class="icon-share"></i> Share (3)</a>
                                            </div>

                                            <div class="margin-bottom-20">
                                            <a class="cursor-pointer" ng-click="controller.loadPreviousComments(post.id)">view previous comments</a><br>
                                            </div>
                                            {{post.comments}}
                                            <div class="timeline-comment" ng-repeat="comment in post.comments">
                                                <div class="timeline-comment-header">
                                                    <img src="/assets/images/avatar5.png" alt="" onerror="this.src='/assets/images/avatar1.png''">
                                                    <p>Nick Doe <small>1 hour ago</small></p>
                                                </div>
                                                <p class="timeline-comment-text">Nullam quis risus eget urna mollis ornare vel eu leo.</p>
                                            </div>
                                            <textarea class="form-control" placeholder="Reply"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </li>

当这是我的控制器时:

 this.loadPreviousComments = function(messageId,limit){
        var limit = limit || 5;
        $http.get('/api/v2/communitycomments',{params:{messageId:messageId,items:limit}})
            .success(function(data){
               that.myposts.comments = data.message;
            });
    }

由于显而易见的原因,它无法正常工作:我更新了控制器中的myposts.comments,这是个别帖子的子范围。

实现这一目标的最佳方式是什么?

1 个答案:

答案 0 :(得分:0)

您可以在加载评论时传递整篇文章:

HTML:

<a class="cursor-pointer" ng-click="controller.loadPreviousComments(post)">view previous comments</a>

控制器:

// Takes a 'message' as parameter instead of just the id
this.loadPreviousComments = function (message, limit){
    var limit = limit || 5;
    var params = {
        messageId: message.id,
        items: limit
    };

    $http.get('/api/v2/communitycomments', { params: params })
        .success(function (data){
            // Add older comments to existing ones
            message.comments = (message.comments || []).concat(data.message);
        });
}