如何在angularjs中显示子嵌套注释

Question

晚上好伙计们，我想在Angular中根据它的父评论显示嵌套的子评论。我不知道如何实现嵌套评论的逻辑，以显示它的父评论。我试过，循环通过所有的评论，但它不起作用。如果你们为我调查，我将不胜感激。

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>

Answer 1

你必须使用“递归”来遍历对象的深度，看一下这篇文章：How can I make recursive templates in AngularJS when using nested objects?