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>

Nikhil Nanjappa · Accepted Answer · 2016-11-08 15:09:00Z

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 8, 2016 at 15:09

Nikhil Nanjappa

6,6823 gold badges30 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

aiman Over a year ago

OMG!! such a quick response. @Nikhil..you are genius. I spent 4 hrs on this. Thank you soo much. :)

Nikhil Nanjappa Over a year ago

:) Glad it helped .. Cheers !

dizad87 Over a year ago

the Aurelia equivalent uses ${$index} instead of {{$index}}

Community · Accepted Answer · 2017-05-23 10:31:34Z

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, 2017 at 10:31

CommunityBot

11 silver badge

answered Nov 8, 2016 at 15:05

furkankatman

1,21014 silver badges24 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related