CODEWITHSUNDEEP
angularjsangularjs-ng-repeatangular-ui-bootstrap
jbenowitz
jbenowitz

Reputation: 1815

Collapse a list of ng-repeat

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?

Upvotes: 2

Views: 10705

Answers (1)

Pixic
Pixic

Reputation: 1345

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.

Upvotes: 4

Related Questions