Collapse a list of ng-repeat

Question

I'm attempting to use ui-bootstrap's collapse on an ng-repeat list of items. I've added ui.bootstrap to my module, and worked out this html:

<div class="title">Things <a class="collapse" ng-click="isThingsCollapsed = !isThingsCollapsed">+</a></div>
<div collapse="isThingsCollapsed">
    <div  ng-repeat="thing in things">{{thing.displayName}}</div>
</div>

Everything looks like it should work, even when click the link I see the 'collapsing' in the html going from:

 <div collapse="isThingsCollapsed" style="height: 81px;"> 

to:

<div collapse="isThingsCollapsed" style="height: 0px;">

But am seeing nothing actually collapse. Everything stays where it was on the screen. Any ideas?

Solution

I had the same problem last week. You need to have the latest scripts. Include these (if not already done):

http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js

http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.4.0.js

Also easy to forget, is that you need the ui.bootstrap as parameter...

var myApp = angular.module('myApp', ['ui.bootstrap']);

Check out the isThingsCollapsed jsfiddle i created...

---

EDIT

Since I got a comment that said that my answer is not even answering the collapse of a ng-repeat I try to give you my view of the problem and then some examples:

• The answer (above "edit") was about how the problem is not in the code you provided us with in the question. Since I had the same problem - the code was correct but not showing a collapse, I finally found out that I had forgot to include ['ui.bootstrap'] as parameter in the module as shown above.

Examples of different ng-repeat collapse:

1. isThingsCollapsed jsfiddle is collapsing a div that has two divs as content, where one of them use ng-repeat and the other div manual output of same JSON.

2. Toggle Chart / Table (external JSAPI works) is collapsing on a div containing a ng-repeat table.

3. Multi-level tables (inside another if clicked) with my own answer and the jsFiddle Multiple ng-repeat tables Not filling DOM w. LVL2 shows you a problem I had regarding two nested ng-repeat tables, and thereby not using collapse, but instead use ng-switch. This gives you a "feeling" of expanding/collapsing on row level.

Hope this clears it up.

Comments

[Pixic]

Made another jsFiddle, Toggle Both/Chart/Table where you can select which to collapse...

[Brian Vanderbusch]

your examples don't even use ng-repeat

[Pixic]

The question started as a problem with UIBOOTSTRAP, so I answered that part and if you check the jsFiddle in my comment just above your comment, in the HTML section, you see that I do use ng-repeat. If you want another example, you can visit a whole thread I created last summer: stackoverflow.com/questions/17544048/… and the jsfiddle.net/Pixic/VGgbq for that one. Perhaps should edit the answer to be more clear about that...