Here is how to create expandable and collapsible tables with Angular.js. I couldn’t find any examples of this online and Angular.js only recently added official support for this in v1.2.0 with ng-repeat using ng-repeat-start/ng-repeat-end.
Don’t get me wrong here, I’m not really a fan of how this looks (I prefer Knockout.js’ “virtual element” approach in this situation) but it seems to be the official/best way to do it with Angular. Luckily I’ve been using Angular for many months now and this is the first time I needed it so it’s pretty uncommon.
What I’m talking about
Collapsed:
Name Gender
+ Bob Male
+ Jane Female
+ Bill Male
Expanded:
Name Gender
– Bob Male
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis nisi quis mi tincidunt luctus ut quis nunc. Nam non risus tincidunt risus sodales condimentum. Morbi sed gravida elit. Nunc a turpis vestibulum elit posuere blandit. Phasellus luctus lectus non porta auctor. Etiam pellentesque imperdiet posuere. Nullam adipiscing congue nisl, in vulputate odio ornare ac.
+ Jane Female
+ Bill Male
JavaScript
|
1 2 3 4 5 6 7 8 9 |
function repeatTest($scope) { $scope.people = [ {name: "Bob", gender: "Male", details: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis nisi quis mi tincidunt luctus ut quis nunc. Nam non risus tincidunt risus sodales condimentum. Morbi sed gravida elit. Nunc a turpis vestibulum elit posuere blandit. Phasellus luctus lectus non porta auctor. Etiam pellentesque imperdiet posuere. Nullam adipiscing congue nisl, in vulputate odio ornare ac."}, {name: "Jane", gender: "Female", details: "Maecenas quis sodales lectus, vitae convallis ipsum. Ut ac viverra tellus. Quisque vulputate, orci placerat eleifend scelerisque, eros nunc rutrum odio, pharetra mattis leo neque vel eros. Cras id purus nec lorem vehicula rutrum a vel arcu. Quisque eget euismod augue. Integer volutpat auctor lorem, quis lacinia nisl tempus nec. Nunc fringilla, odio eget molestie varius, tortor turpis dignissim lacus, sed varius nunc velit eu turpis. Etiam sed congue diam. In ornare elit nec dolor faucibus ornare. Ut eget erat vel elit tristique iaculis. Maecenas et semper lorem. Nam mollis ante et ipsum vestibulum posuere. Ut non purus non risus tempor vulputate et vitae ipsum. Mauris et sem sit amet quam pulvinar fringilla."}, {name: "Bill", gender: "Male", details: "Quisque rhoncus scelerisque sapien, tempor vestibulum dui tincidunt eu. Maecenas scelerisque, dolor sed vehicula pulvinar, ligula erat ornare arcu, in dictum ipsum libero vel est. Donec porttitor venenatis lacus, a laoreet orci. Proin quam mi, ultrices in ullamcorper vel, malesuada suscipit lectus. Nam faucibus commodo quam, auctor vehicula felis condimentum quis. Phasellus tempor molestie enim, at vehicula justo auctor eu. Pellentesque venenatis elit eu malesuada fringilla."} ]; } |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!DOCTYPE html> <html> <head> <script src="http://code.angularjs.org/1.2.0-rc.2/angular.js"></script> <link rel="stylesheet" href="style.css" /> <script src="script.js"></script> <style> .button </style> </head> <body ng-app=""> <h1>People and Details</h1> <div ng-controller="repeatTest"> <table> <thead style="background-color: lightgray;"> <tr> <td style="width: 30px;"></td> <td>Name</td> <td>Gender</td> </tr> </thead> <tbody> <tr ng-repeat-start="person in people"> <td> <button ng-if="person.expanded" ng-click="person.expanded = false">-</button> <button ng-if="!person.expanded" ng-click="person.expanded = true">+</button> </td> <td>{{person.name}}</td> <td>{{person.gender}}</td> </tr> <tr ng-if="person.expanded" ng-repeat-end=""> <td colspan="3">{{person.details}}</td> </tr> </tbody> </table> </div> </body> </html> |
Here is an example Plunker with it running. Enjoy and let me know if you’ve found a better way!
Hiya, I’m really glad I have found this information. Today bloggers publish only about gossips and internet and this is actualpy annoying.
A good web site with exciting content, that’s whst I need.
Thank you forr keeping this web-site, I will be visiting it.
Do you do newsletters? Can’t ind it.
obviously like your web-site however you need to test the spellinng on several of your posts.
Several of them are rife with spelling issuess and I iin finding it very bothersome
to infrm the trugh then again I will certainly
come back again.
If some one wants expert view on the topic of blogging
and site-building after that i advise him/her to visit this web site, Keep up the nice job.
Keep on working, great job!
It’s genuinely very complicated in this active life to listen news on Television,
so I simply use web for that purpose, and take the hottest news.
Spot on with this write-up, I absolutely believe that this site needs a lot more attention. I’ll
probably be back again to read more, thanks for the info!
Hey Nice solution. Thank you very much!!
Great solution! Thank you!
I am looking to add animation to this and tried everything. Strangely the angularjs animate and css transitions are not working well with the tr ng-if elements.
Any suggestions on how I could go about it?
You made my day. I was building angular version of Jtable and want to give hierarchical support for data.Your solution worked perfectly.
How to do if one row is expanded and remaining all rows should be collapsed(scenario: if i expand one row, again if i expand one more row. previously expanded should be collapsed.
How can I select collapsible row. Like If I select all the collapsible rows under it should get selected?
Great article; the -start and -end are awesome and the colspan=”3″ is also a great addition since it allows us to put anything into the table row without being restricted by the number .
Is there a way to expan specific while collapse all others?
How to implement ‘close others’ functionality in this example.
Is there a way to expand / collapse ALL of the rows in a parent table?
This happened to me by accident, but it’ll work for you.
In this example, change each occurrence of “person.expanded” to “people.expanded”
Keep these aritlces coming as they’ve opened many new doors for me.
David French writes;Ruby, if your emails, or email versions of your website. displayed Comments directly or had an apparent link to view Comments, then more people would leave comments. See the Comments on PatentlyO.com.
Thanks! Really helpful!
Can I have an index based check box as part of the main row before expanding, so that I can carry on with my index based functionality. I tried implementing it but I can see only one check box.
Regards,
AngelaM
Works like a charm! Thanks!
Hi john,
I have to use nested ng-repeat using table in angular js. So that on expand i can open other. Can you help me out for this situation.
Thanks
Hi John
Excellent example, and so simple. Works with smart-tables without interfering with their code as well. **Ensure you have the ng-repeat-start** and not just ng-repeat, I tested to the see the difference and sure enough, the expansion only occurs with the start added.
By the way, John, is there a post on Stack you have answered with this, I wouldn’t mind popping an up-vote on it.
Kind regards
Hi John,
in the WPF days I put a IsExpanded property on the ViewModel. Then you do not need the 2 buttons.
Hi how are you ? That was a really helpful example exactly what I need for clickable exandable row. Sweet thanks.
This wouldn’t work since is outside of the repeater in the above
Not only was my formatting wrong, but I completely overlooked the
-startand-end, the point of this article… Sorry but thank you!