Fork me on GitHub

Expandable / collapsable table detail rows with Angular.js 14

by

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

 HTML

 

Here is an example Plunker with it running. Enjoy and let me know if you’ve found a better way!

14 thoughts on “Expandable / collapsable table detail rows with Angular.js

  1. Reply Jomar Nov 18, 2016 10:27 am

    Is there a way to expan specific while collapse all others?

  2. Reply Sateesh Kumar Oct 19, 2016 1:19 am

    How to implement ‘close others’ functionality in this example.

  3. Reply Anthony Jaxon Aug 17, 2016 11:45 am

    Is there a way to expand / collapse ALL of the rows in a parent table?

    • Reply Eugenia Soria Oct 5, 2016 6:57 pm

      This happened to me by accident, but it’ll work for you.
      In this example, change each occurrence of “person.expanded” to “people.expanded”

  4. Reply Jorge Apr 16, 2016 11:18 pm

    Thanks! Really helpful!

  5. Reply AngelaM Mar 16, 2016 10:12 am

    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

  6. Reply tezet Mar 2, 2016 4:49 am

    Works like a charm! Thanks!

  7. Reply rroxysam Feb 24, 2016 1:19 pm

    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

  8. Reply App Dev Guy Feb 18, 2016 7:32 pm

    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

  9. Reply bastienJS Dec 7, 2015 2:20 pm

    Hi John,

    in the WPF days I put a IsExpanded property on the ViewModel. Then you do not need the 2 buttons.

  10. Reply Johnathan McAuliffe Dec 23, 2014 8:17 am

    Hi how are you ? That was a really helpful example exactly what I need for clickable exandable row. Sweet thanks.

  11. Reply Karan Jun 12, 2014 10:05 pm

    This wouldn’t work since is outside of the repeater in the above

    • Reply Karan Jun 12, 2014 10:11 pm

      Not only was my formatting wrong, but I completely overlooked the -start and -end, the point of this article… Sorry but thank you!

Leave a Reply