How to expand a table to add more information in an accordion style in AngularJS

Question

I've been having a lot of hiccups making this work. Essentially I want to be able to click on a row on my table to expand that row and provide additional information within there. I want it to be a toggled accordion style (drawers), so I can open multiple at once. The code is below.

<div class="row">
    <div class="col-md-11">
    <table class="table table-hover table-bordered">
        <thead>
        <tr>
            <th>S</th>
            <th>R</th>
            <th>Se</th>
            <th>D</th>
            <th>Ser</th>
            <th>L</th>
        </tr>
        </thead>

        <tbody>
        <tr ng-repeat="x in projects | filter:query | filter:quer | orderBy:orderProp">
            <td><b>{{x.a}}</b></td>
            <td>{{x.b}}</td>
            <td><u>{{x.c}}</u></td>
            <td>{{x.d}}</td>
            <td>{{x.e}}</td>
            <td>{{x.f}}</td>
        </tr>
        </tbody>
    </table>
    </div>
</div>

It forms a table with six columns which will loop through records and produce many sets of information. I want to be able to give these rows the ability to expand and collapse on click.

http://plnkr.co/edit/CO7ZHudbfR9TZxGTQfGZ

Thanks.

Answer 1

You may use angular-ui-bootstrap which provides a set of AngularJS directives based on Twitter Bootstrap's markup and CSS, and iterate through your data using ng-repeat on <accordion>.

  <accordion-group  ng-repeat="x in pro | orderBy:orderProp">
      <accordion-heading>
        <div class="row">
          <div class="cell"><b>{{x.a}}</b></div>
          <div class="cell">{{x.b}}</div>
          <div class="cell"><u>{{x.c}}</u></div>
          <div class="cell">{{x.d}}</div>
          <div class="cell">{{x.e}}</div>
          <div class="cell">{{x.f}}</div>
        </div>
      </accordion-heading>

   <div>
     Test Data
   </div>

  </accordion-group>
</accordion>

Further, you may use css to display tabular data

.table{
  display: table;
  width:100%
}
.row{
  display: table-row;
}
.cell{
  display: table-cell; 
  width:20%
}

The advantage of using ui-bootstrap is, it provide access to native AngularJS directives without any dependency on jQuery or Bootstrap's JavaScript.

Here's the updated plunkr

Answer 2

It seems I figured it out. By using ng-click and a little bit of js you can do it quite easily. In the you add this.

<tbody>
        <tr ng-repeat-start="x in projects | filter:query | filter:quer | orderBy:orderProp">
            <td><a href="#" ng-click="isCollapsed = !isCollapsed"><b>{{x.a}}</b></a></td>
            <td>{{x.b}}</td>
            <td><u>{{x.c}}</u></td>
            <td>{{x.d}}</td>
            <td>{{x.e}}</td>
            <td>{{x.f}}</td>
        </tr>
        <tr collapse="isCollapsed" ng-repeat-end="">
        <td colspan="3">
          <h3>Test</h3>
          <p>Test</p>
        </td>
      </tr>
        </tbody> 

You need ui-bootstrap so add this to your scripts.

 <script data-require="[email protected]" data-semver="0.12.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>

And add this to your javascript, the addition being 'ui.bootstrap'

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

The a href is not necessary, it just highlights that you can click it. It is probably better to do this.

<td ng-click="isCollapsed = !isCollapsed"><b>{{x.a}}</b></td>

That way clicking the cell will trigger the expand/collapse.