Please check the updated fiddle: http://jsfiddle.net/nZ9Nx/9/
I have created the app and injected ui-bootstrap in it to have the collapse working.
angular.module('test', ['ui.bootstrap']);
Question
I am trying to embed some collapsible panels in a ngRepeat. This is what I have:
<div class="panel panel-default" ng-repeat="element in elements">
<div class="panel-heading">
{{element.name}}
<button value="Collapse" ng-click="element.isCollapsed != element.isCollapsed"></button>
</div>
<div class="panel-body" collapse="element.isCollapsed">
Content
</div>
</div>
Now, when I click on the button, the collapse doesn't work.
From the documentation I understand that the repeater creates a scope for every element
.
And the attribute collapse
of the panel-body should get the same scope, right?
It seems that the scope.$watch
in the collapse
directive is not working properly.
Or maybe I'm doing something wrong?
Thanks
La solution
Please check the updated fiddle: http://jsfiddle.net/nZ9Nx/9/
I have created the app and injected ui-bootstrap in it to have the collapse working.
angular.module('test', ['ui.bootstrap']);
Autres conseils
The problem is
<div class="panel-heading" toggle target="collapseOne">
It's hardcoded in the example. Replace with...
<div class="panel-heading" toggle target="collapse{{ $index + 1 }}">
Also update this tag
<div id="collapse{{ $index + 1 }}" toggleable active-class="in" exclusion-group="accordion1" default="active" class="panel-collapse collapse">
Here is a full example
<div ng-repeat="item in awesomeThings">
<div class="panel panel-default">
<div class="panel-heading" toggle target="collapse{{ $index + 1 }}">
<h4 class="panel-title">
{{ item }}
</h4>
</div>
<div id="collapse{{ $index + 1 }}" toggleable active-class="in" exclusion-group="accordion1" default="active" class="panel-collapse collapse">
<div class="panel-body">
<!-- ... -->
</div>
</div>
</div>
</div>