动态更改自引导面板链接名称(打开和关闭面板),用于AngularJs ng-repeat。

时间:2022-04-23 11:57:45

How can I set up my Bootstrap panel collapse, to dynamically increment with AngularJs ng-repeat?

如何设置引导面板崩溃,用AngularJs ng-repeat动态增量?

In other words, change this:

换句话说,改变这个:

data-target="#collapseOne", and this: <div id="collapseOne">

data-target="# seone ",这个:

to something like (mind the sudo code):

例如(mind the sudo code):

This: data-target="#collapse" + "+=" and this: <div id="collapse" + "+=">

:数据目标= " #崩溃”+“+ =”和:< div id = "崩溃" + " + = " >

<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>

1 个解决方案

#1


1  

You can use ng-attr to bind it with Angular:

你可以使用ng-attr来将它与角相结合:

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

If you are working with ng-repeat, you can use $index to set this ID.
It will works for every attribute.

如果您正在使用ng-repeat,您可以使用$index来设置这个ID,它将为每个属性工作。

#1


1  

You can use ng-attr to bind it with Angular:

你可以使用ng-attr来将它与角相结合:

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

If you are working with ng-repeat, you can use $index to set this ID.
It will works for every attribute.

如果您正在使用ng-repeat,您可以使用$index来设置这个ID,它将为每个属性工作。