Question

我正在使用bootstrap 4卡制作博客文章，当您点击“查看评论”链接时，它应该在卡片页脚中打开折叠的div，其中将显示所有评论。崩溃与硬编码的HTML一起正常工作，甚至在崩溃div之前重复的动态数据{{blog.title}}也是如此。但是，如果我尝试在页面中的卡片主体中添加ng-repeat ='comment in blog.comments，则视图注释按钮甚至不会打开崩溃。我看到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（<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="item" data-item-id="1"><button class="delete-item">delete</button></div> <div class="item" data-item-id="2"><button class="delete-item">delete</button></div> <div class="item" data-item-id="3"><button class="delete-item">delete</button></div>）与commentDiv（ng-repeat中的AngularJS索引）连接起来。这样您就可以生成Bootstrap的唯一标识符。像这样（只发布代码的相关部分）：

$index

ng-repeat无法使用bootstrap崩溃

1 个答案: