ng-repeat 不适用于 bootstrap 崩溃

Question

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

来自第一个 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-->

ng-repeat 不适用于 bootstrap 崩溃

ng-repeat not working with bootstrap collapse

twitter-bootstrap

angularjs

angularjs-ng-repeat