如何使用 angularJS ng-repeat 在循环中显示引导折叠面板？答案

【问题标题】：how to display bootstrap collapse-panel in a loop using angularJS ng-repeat?如何使用 angularJS ng-repeat 在循环中显示引导折叠面板？
【发布时间】：2016-11-08 14:59:22
【问题描述】：

我正在使用 angularJS 并尝试在循环中添加引导可折叠面板。
我已经编写了下面的代码，但所有面板的 body 都显示在第一个面板标题下。
我需要将body 显示在其相应的面板标题下。
我相信这是因为每当在<a href="#myButton"> 中发生点击时，循环中的所有后续面板都会调用<div id="myButton">。
有没有办法可以使用变量值来设置 ID？
类似：<a href="#{{variable}}"> 和 <div id="{{variable}}"> ？

我写的代码：

<div ng-repeat="ownr in meldHealth.ownerList | orderBy: 'ownr'">
    <div class="panel-group">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" href="#myButton" ng-click="getApps(ownr)">{{ownr}}</a>
                </h4>
            </div>
            <div id="myButton" class="panel-collapse collapse">
                <div class="panel-body">
                    <div class="col-xs-12">
                        <span ng-repeat="word in ownerApps | orderBy: 'word'">
                            <button class="btn btn-default text-blue" data-toggle="modal" href="#myModal" type="button"
                             ng-click="getDetails(word.name, currOwner)" style="width:250px;">
                            {{word.name}}
                            </button>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

标签： javascript jquery html angularjs twitter-bootstrap

【解决方案1】：

在 Angular 中使用 $index

<a data-toggle="collapse" href="#myButton{{$index}}" ng-click="getApps(ownr)">{{ownr}}</a>

在你的<div>

<div id="myButton{{$index}}" class="panel-collapse collapse">

其余代码几乎相同。

【讨论】：

天啊！！这么快的反应。 @Nikhil ..你是天才。我在这上面花了 4 个小时。非常感谢你。 :)
:) 很高兴它有帮助.. 干杯！
Aurelia 等价物使用 ${$index} 而不是 {{$index}}

【解决方案2】：

为了解决这个重复 ID 问题，您可以使用 $index 并检查链接 How can I use the $index inside a ng-repeat to enable a class and show a DIV? 示例<span id="{{$index}}"></span>

【讨论】：