aiman aiman - 27 days ago 17
Javascript Question

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

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>

Answer

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.

Comments