Nested comments in AngularJS with ng-repeat

Question

I've created a directive for displaying nested comments in AngularJS. The main point of it was to have infinite comments when returned JSON from API would look something like this:

    [
        {
            'id': 66,
            'text': 'This is the first comment.',
            'creator': {
                'id': 52,
                'display_name': 'Ben'
            },
            'respondsto': null,
            'created_at': '2014-08-14T13:19:59.751Z',
            'responses': [
                {
                    'id': 71,
                    'text': 'This is a response to the first comment.',
                    'creator': {
                        'id': 14,
                        'display_name': 'Daniel',
                    },
                    'respondsto': 66,
                    'created_at': '2014-08-14T13:27:13.915Z',
                    'responses': [
                        {
                            'id': 87,
                            'text': 'This is a response to the response.',
                            'creator': {
                                'id': 52,
                                'display_name': 'Ben',
                            },
                            'respondsto': 71,
                            'created_at': '2014-08-14T13:27:38.046Z',
                            'responses': []
                        }
                    ]
                }
            ]
        },
        {
            'id': 70,
            'text': 'Đây là bình luận thứ hai.',
            'creator': {
                'id': 12,
                'display_name': 'Nguyễn'
            },
            'respondsto': null,
            'created_at': '2014-08-14T13:25:47.933Z',
            'responses': []
        }
    ];

So on the first level I'm doing ng-repeat on this array:

    <div ng-repeat="comment in comments | orderBy: 'id': true" ng-include="'comment.html'"></div>

And then inside of comment.html I'm repeating responses with the same template:

    <div ng-repeat="comment in responses = comment.responses | orderBy: 'created_at': true" ng-include="'comment.html'"></div>

And this gives me erros when there are 10 nests of responses:

    Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!

Now I don't really need to solve this error, but my question would be, how could I know in which nest I am so that I could disable adding new responses when e.g. 5th level of the nest is reached.

try ng-repeat="response in comment.responses" for your second one — desbo
– desbo, Commented Aug 20, 2014 at 12:14
What? No, comment in... is good as I'm using the same template where comment variable is used to display info about a comment. My question was not about that... — Julius
– Julius, Commented Aug 20, 2014 at 12:15
Could you post your solution as an answer and accept it? That's how Stack Overflow works. :) — Hugo Wood
– Hugo Wood, Commented Aug 20, 2014 at 12:36

Julius · Accepted Answer · 2014-08-20 12:46:56Z

5

SOLVED

So to count levels I'm using level variable inside ng-repeat of responses:

    <div ng-repeat="comment in responses = comment.responses | orderBy: 'created_at': true" ng-include="'comment.html'" ng-init="level = level + 1"></div>

And then on the controls I'm checking that level, e.g. to not show the control:

    ng-hide="level > 5"

answered Aug 20, 2014 at 12:46

Julius

2,4933 gold badges22 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Asad Over a year ago

how u do this ng-repeat="comment in responses = comment.responses its not working on mine side

Collectives™ on Stack Overflow

Nested comments in AngularJS with ng-repeat

1 Answer 1

SOLVED

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

SOLVED

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related