如何使用angularJS ng-repeat在循环中显示bootstrap collapse-panel？

Question

我正在使用angularJS并尝试在循环中添加bootstrap可折叠面板.
我已经编写了下面的代码,但body所有面板中的代码都显示在第一个面板标题下.
我需要在body相应的面板标题下显示.
我相信这种情况正在发生,因为<div id="myButton">无论何时发生点击,都会在循环中调用所有后续面板<a href="#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>

Answer 1

利用$index在角

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

在你的 <div>

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

其余代码几乎可以相同.