ng-repeat 不适用于引导程序崩溃

Question

我正在使用 bootstrap 4 卡来制作博客文章，当您单击“查看评论”链接时，它应该会在卡页脚中打开一个折叠的 div，所有 cmets 都将显示在该处。折叠在使用硬编码的 html 甚至使用在折叠 div 之前重复的动态数据 {{blog.title}} 时都能正常工作。但是，如果我尝试将 ng-repeat='comment in blog.cmets' 添加到页脚的卡体中，则查看 cmets 按钮甚至不会打开折叠。我看到this post 并尝试实现 $index 但要么我没有正确执行，要么解决方案对我不起作用，有些我将在尝试修复之前发布我的原始代码。

来自第一个 ng-repeat 的博客对象

{
"_id": {"$oid": "5a6a426145cc5a2414ef06c4"},
"publishDate": {"$date": "2018-01-25T20:47:29.182Z"},
"comments": [
    {
        "_id": {"$oid": "5a6a429145cc5a2414ef06c5"},
        "username": "Rawle Juglal",
        "comment": "My first comment",
        "blog": {"$oid": "5a6a426145cc5a2414ef06c4"}
    },
    {
        "_id": {"$oid": "5a6a42a645cc5a2414ef06c6"},
        "username": "Phoenix Juglal",
        "comment": "A comment for deleting",
        "blog": {"$oid": "5a6a426145cc5a2414ef06c4"}
    }
],
"title": "My Coaching Philosophy",
"body": "This will be the first post in my new blog",
"__v": 2

}

blog.html

<div class='container-fluid screen-bg'>
<div class='row'>
    <div class='col-12 text-center'> ...</div><!--End of col-12-->
</div><!--End of row-->
<div class='row pb-3' ng-repeat='blog in $ctrl.blogs'>
    <div class='col-12'>
        <div class='card'>
            <div class='card-header'>
                <div class='row'>
                    <div class='col-3 col-md-2'>...</div><!--End of col-md-2-->
                    <div class='col-9 col-md-7'>
                        <h3 class='d-sm-none denim'>{{blog.title}}</h3>
                    </div><!--End of col-md-7-->
                    <div class='col-12 col-md-3'>
                        <p class='d-sm-none denim'>{{blog.publishDate | date:'mediumDate'}}</p>
                    </div><!--End of col-md-3-->
                </div><!--End of row-->
            </div><!--End of card-header-->
            <div class='card-body'>...</div><!--End of card body-->
            <div class='card-footer'>
                <div class='row'>
                    <div class='col-12'>
                        <a class='float-right view-link' data-toggle='collapse' href="#commentDiv" role="button" aria-expanded="false" aria-controls="commentDiv"><u><span class='h4'><i class="fa fa-comments" aria-hidden="true"></i> View Comments</span></u></a>
                    </div><!--End of col-12-->
                    <div class='col-12'>
                        <div class="collapse" id="commentDiv">
                          <div class="card card-body" ng-repeat='comment in blog.comments'>
                            Some text
                            <p>{{comment.username}}</p>
                          </div><!--End of card-body-->
                        </div><!--End of commentDiv-->
                    </div><!--End of col-12-->
                </div><!--End of row-->         
            </div><!--End of card footer-->
        </div><!--End of card-->
    </div><!--End of col-12-->
</div><!--End of row-->

Answer 1

尝试将您拥有的 id (commentDiv) 与 $index（ng-repeat 中的 AngularJS 索引）连接起来。这样您就可以为 Bootstrap 工作生成唯一标识符。像这样（只贴代码的相关部分）：

<div class='row pb-3' ng-repeat='blog in $ctrl.blogs track by $index'>

...

<div class='col-12'>
     <a class='float-right view-link' data-toggle='collapse' href="#commentDiv{{$index}}" role="button" aria-expanded="false" aria-controls="commentDiv{{$index}}"><u><span class='h4'><i class="fa fa-comments" aria-hidden="true"></i> View Comments</span></u></a>
</div><!--End of col-12-->

...

<div class="collapse" id="commentDiv{{$index}}">
     <div class="card card-body" ng-repeat='comment in blog.comments'>
           Some text
          <p>{{comment.username}}</p>
     </div><!--End of card-body-->
 </div><!--End of commentDiv-->