2

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?

jbenowitz
  • 1,795
  • 6
  • 26
  • 39
  • If you think my solution answered your question, feel free to mark it as best answer. Thanks. =) – Pixic Nov 26 '13 at 21:50

1 Answers1

4

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.

Community
  • 1
  • 1
Pixic
  • 1,345
  • 1
  • 17
  • 29
  • Made another jsFiddle, [Toggle Both/Chart/Table](http://jsfiddle.net/Pixic/4kkpm/) where you can select which to collapse... – Pixic Jul 22 '13 at 16:27
  • your examples don't even use ng-repeat – Brian Vanderbusch Mar 17 '14 at 04:56
  • 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: http://stackoverflow.com/questions/17544048/multi-level-tables-inside-another-if-clicked and the http://jsfiddle.net/Pixic/VGgbq/ for that one. Perhaps should edit the answer to be more clear about that... – Pixic Mar 17 '14 at 07:17