admin管理员组文章数量:1325361
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.
Thanks.
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.
Share Improve this question asked Jun 19, 2015 at 10:01 TheLimeTreesTheLimeTrees 4116 silver badges20 bronze badges 2- expand what and in what manner? demo has no extra data that isn't already being displayed – charlietfl Commented Jun 19, 2015 at 11:27
- 1 Like this essentially. jsfiddle/Pixic/VGgbq However I want the ability to expand multiple at one time. – TheLimeTrees Commented Jun 19, 2015 at 11:43
2 Answers
Reset to default 4You 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
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.
版权声明:本文标题:javascript - How to expand a table to add more information in an accordion style in AngularJS - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742193872a2430716.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论