动态更改AngularJs ng-repeat的Bootstrap面板链接名称（打开和关闭面板）

Question

如何设置我的Bootstrap面板折叠，以AngularJs ng-repeat动态增加？

换句话说，改变一下：

data-target="#collapseOne"， 还有这个： <div id="collapseOne">

之类的（请注意sudo代码）：

此： data-target="#collapse" + "+=" 还有这个： <div id="collapse" + "+=">

<div ng-repeat="product in products">
    <div class="panel-group">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-target="#collapseOne">{{product.productName}}</a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse">
                <div class="panel-body">{{product.productDescription}}</div>
                <div class="panel-footer">Panel Footer</div>
            </div>
        </div>
    </div>
</div>

Answer 1

您可以使用ng-attr将其与Angular绑定：

<a ... ng-attr-data-target="{{'#collapseOne' + yourId}}">
    {{product.productName}}
</a>

如果您使用的是ng-repeat，则可以使用$index来设置此ID 它适用于每个属性。