我如何在 angularjs 中显示子嵌套评论

Posted

技术标签:

【中文标题】我如何在 angularjs 中显示子嵌套评论【英文标题】:How do i show the child nested comments in angularjs 【发布时间】:2018-04-24 04:23:59 【问题描述】:

晚上好伙计们,请我想在 Angular 的父评论下显示嵌套的子 cmets。我不知道如何实现嵌套 cmets 的逻辑以显示在它的父评论下。我已经尝试过,循环所有的 cmets,但它不起作用。如果你们帮我研究一下,我将不胜感激。

function loadData() 
                    $http(
                        url: '../Services/svBlogComments.asmx/GetAllBlogCommentByBlogID',
                        method: 'get',
                        params:  bid: $routeParams.ID 
                    ).then(function (response) 
                        $scope.y = response.data;
                        //console.log($scope.y[i].ID);
                        try 
                            for (var i = 0; i < response.data.length;i++)
                            
                                $http(
                                    url: '../Services/svBlogComments.asmx/GetAllBlogCommentByParentID',
                                    method: 'get',
                                    params:  bid: $routeParams.ID, parentid: response.data[i].ID 
                                ).then(function (childcomments) 
                                    $scope.p = childcomments.data;
                                );
                            
                         catch (e) 
                            console.log(e);
                                              
                    );
                ;
<div class="row" id="divParent">
                        <ul class="media-list" ng-repeat="x in y">
                            <li class="media" data-id="x.ID">
                                <div class="media-left">
                                    <a href="#">
                                        <img id="ImageParent" class="media-object" style="width: 40px; height: 40px;" src="../backgrounds/conference.png" />
                                    </a>
                                </div>
                                <div class="media-body">
                                    <h4 class="media-heading" style="font-size: 12px; font-family: Rockwell;">x.Username
                                    <small style="font-size: 13px;">
                                        <i>x.Created | date:'dd, MMMM yyyy'</i>
                                    </small>
                                        <small style="font-size: 13px; visibility: hidden;">
                                            <span id="lblID">x.ID</span>
                                        </small>
                                    </h4>
                                    <p class="media-text" style="font-size: 14px; font-family: Rockwell;">
                                        x.CommentMessage
                                    </p>
                                    <div class="" style="display:none;">
                                        <a class="link reply-link" style="cursor: pointer; text-decoration: none; font-size: 12px;">Reply</a>   &nbsp;&nbsp;
                                        <a class="link cancel-link" style="cursor: pointer; text-decoration: none; font-size: 12px;">Cancel</a>
                                    </div>

                                    <div class="media" ng-repeat="a in p">
                                        <div class="media-left">
                                            <a href="#">
                                                <img id="Img1" class="media-object" style="width: 40px; height: 40px;" src="../backgrounds/conference.png" />
                                            </a>
                                        </div>
                                        <div class="media-body">
                                            <h4 class="media-heading" style="font-size: 12px; font-family: Rockwell;">a.Username
                                    <small style="font-size: 13px;">
                                        <i>a.Created | date:'dd, MMMM yyyy'</i>
                                    </small>
                                                <small style="font-size: 13px; visibility: hidden;">
                                                    <span id="Span1">a.ID</span>
                                                </small>
                                            </h4>
                                            <p class="media-text" style="font-size: 14px; font-family: Rockwell;">
                                        a.CommentMessage
                                    </p>
                                        </div>
                                    </div>






                                </div>
                            </li>
                        </ul>




                    </div>

【问题讨论】:

【参考方案1】:

你必须使用“递归”来循环一个对象的深度,看看这个帖子:How can I make recursive templates in AngularJS when using nested objects?

【讨论】:

以上是关于我如何在 angularjs 中显示子嵌套评论的主要内容,如果未能解决你的问题,请参考以下文章

如何实现嵌套评论系统?

如何在angularjs中使用带有嵌套ng-repeat的复选框

如何在AngularJS中使用ng-repeat创建嵌套结构[关闭]

AngularJS - 部分和模板的嵌套不起作用

如何在控制器中将函数的输出显示为angularjs中的嵌套视图

如何在 AngularJS 表单中嵌套 Angular 2+ 表单?