Angularjs UI collapse in ngRepeat

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.

Please create a fiddle for the same. Please explain ng-click="element.isCollapsed != element.isCollapsed" You checking on the same element in the click event — V31
– V31, Commented Feb 18, 2014 at 10:49
Hi V31, thanks for your comment. I created a fiddle jsfiddle.net/nZ9Nx/7 and corrected the code. — Enrico
– Enrico, Commented Feb 18, 2014 at 12:07

V31 · Accepted Answer · 2014-02-18 12:35:14Z

5

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']);

answered Feb 18, 2014 at 12:35

V31

7,6643 gold badges28 silver badges44 bronze badges

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

4 Comments

FutuToad Over a year ago

whats special about ui-bootstrap?

V31 Over a year ago

Its a library which defines directives for the bootstrap javascript components which are available. This helps in having the javacscript Components (outside angular scope) to be inside the angular scope.

Enrico Over a year ago

Hi! Thanks for the suggestion. It works quite good! It's exactly what I need. Basically you used the classic ng-hide/ng-show bypassing the "collapse" directive, am I right? I was so focused in my solution and I wasn't able to see the easiest one. Thanks! It would be anyway interessant to understand why the collapse doesn't work...

demaniak Over a year ago

@Enrico - hit the same problem now. I THINK it is to do with the way angular processes templates and the way the bootstrap collapse plugin works. Basically, I THINK by the time the bootstrap javascript (required for collapse plugin) kicks in, the ng-repeat stuff has not yet happened, so in effect boostrap JS never get's a chance to do it's magic.

Natus Drew · Accepted Answer · 2014-09-02 16:28:06Z

4

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>

answered Sep 2, 2014 at 16:28

Natus Drew

1,8963 gold badges22 silver badges24 bronze badges

1 Comment

Shikha thakur Over a year ago

hey what if the collapsed panel is not in ng-repeat scope then how do you trigger collapse

Collectives™ on Stack Overflow

Angularjs UI collapse in ngRepeat

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related