Good evening guys,please i would like to show the nested child comments under it's parent comment in Angular.I do not know how to implement the logic for the nested comments to show underneath it's parent comment.I have tried,looping through all the comments but it doesn't work.i would be grateful if you guys looked into it for me.
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>
<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>
