how to display bootstrap collapse-panel in a loop using angularJS ng-repeat?

Question

I am using angularJS and trying to add bootstrap collapsible-panel in a loop.
I have written the code below, but the body of all the panels is getting displayed under the first panel header.
I need the body to be displayed under their corresponding panel headers.
I believe this is happening because of the <div id="myButton"> is getting called for all the subsequent panel in the loop whenever a click is taking place in <a href="#myButton">.
Is there a way I can use a variable value for setting the ID?
Anything like: <a href="#{{variable}}"> and <div id="{{variable}}"> ?

Code I wrote:

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

score 10 · Accepted Answer · answered Nov 08 '16 at 15:09

10

Make use of $index in Angular

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

and in your <div>

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

Rest of the code can pretty much be the same.

answered Nov 08 '16 at 15:09

Nikhil Nanjappa

6,454
3
28
44

OMG!! such a quick response. @Nikhil..you are genius. I spent 4 hrs on this. Thank you soo much. :) – aiman Nov 08 '16 at 15:16
:) Glad it helped .. Cheers ! – Nikhil Nanjappa Nov 08 '16 at 15:17
the Aurelia equivalent uses ${$index} instead of {{$index}} – dizad87 Aug 24 '18 at 12:59

score 1 · Answer 2 · edited May 23 '17 at 10:31

1

In order to resolve this duplicate ID issue you can use $index and check the link How can I use the $index inside a ng-repeat to enable a class and show a DIV? Example <span id="{{$index}}"></span>

edited May 23 '17 at 10:31

Community

1
1

answered Nov 08 '16 at 15:05

katmanco

1,146
12
24

how to display bootstrap collapse-panel in a loop using angularJS ng-repeat?

2 Answers2