使用ng-repeat在AngularJS中嵌套注释

时间:2014-08-20 12:11:16

标签: angularjs angularjs-ng-repeat

我已经创建了一个在AngularJS中显示嵌套注释的指令。它的主要观点是,当从API返回的JSON看起来像这样时,会有无限的注释:

    [
        {
            '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': []
        }
    ];

所以在第一级我正在对这个数组进行ng-repeat:

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

然后在comment.html内部,我正在使用相同的模板重复回复:

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

当有10个反应巢时,这给了我错误:

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

现在我真的不需要解决这个错误,但我的问题是,我怎么能知道我在哪个巢中,以便我可以禁用添加新的响应,例如达到了第5层。

1 个答案:

答案 0 :(得分:5)

解决

因此,为了计算水平,我在响应的ng-repeat中使用级别变量:

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

然后在控件上我正在检查该级别,例如不显示控件:

    ng-hide="level > 5"