如何在 AngularJS 中展开表格以手风琴样式添加更多信息
How to expand a table to add more information in an accordion style in AngularJS
我在这项工作中遇到了很多问题。从本质上讲,我希望能够单击表格上的一行以展开该行并在其中提供其他信息。我希望它是一个切换的手风琴样式(抽屉),这样我就可以一次打开多个。代码如下。
<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>
它形成一个包含六列的表,该表将循环访问记录并生成许多信息集。我希望能够使这些行能够在单击时展开和折叠。
http://plnkr.co/edit/CO7ZHudbfR9TZxGTQfGZ
谢谢。
你可以使用 angular-ui-bootstrap,它提供了一组基于 Twitter Bootstrap 标记和 CSS 的 AngularJS 指令,并使用 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>
此外,您可以使用 css 显示表格数据
.table{
display: table;
width:100%
}
.row{
display: table-row;
}
.cell{
display: table-cell;
width:20%
}
使用 ui-bootstrap 的优点是,它提供了对本机 AngularJS 指令的访问,而不依赖于 jQuery 或 Bootstrap 的 JavaScript。
这是更新的 plunkr
看来我想通了。通过使用ng-click和一点js,您可以非常轻松地做到这一点。在你添加这个。
<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>
你需要 ui-bootstrap,所以把它添加到你的脚本中。
<script data-require="angular-bootstrap@0.12.0" data-semver="0.12.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>
并将其添加到您的javascript中,添加的是"ui.bootstrap"
var app = angular.module("myApp",['ui.bootstrap']);
a href 不是必需的,它只是突出显示您可以单击它。这样做可能更好。
<td ng-click="isCollapsed = !isCollapsed"><b>{{x.a}}</b></td>
这样,单击单元格将触发展开/折叠。
相关文章:
- 当包含另一个asp文件时,是否也包含所有引用的样式和脚本页面
- 将样式表插入iframe
- 跟踪在页面加载时应用内联样式的JavaScript
- 如果文本字段为空,则使用JavaScript应用CSS样式
- 手风琴可点击并悬停
- 定义完全独立的样式信息
- W3C循环样式的JavaScript
- jQuery/JavaScript在线公文包表单-打印样式表
- 使用递归、Ramda.js和无点样式重构字符串的getPermutations()
- FF和Chromium中CSS样式按钮的外观差异
- 如何在页面加载时折叠手风琴样式的特定部分
- 在 jQuery 手风琴样式菜单中切换子项可见性
- JQuery:手风琴高度样式:填充导致垂直滚动条
- 同一页面中两个 jquery 手风琴的不同样式
- 在简单的 jquery 手风琴中切换 CSS 样式
- 自定义jQuery手风琴样式和图像不起作用
- 手风琴作为页脚样式问题
- 当手风琴/选项卡打开或关闭时对页面进行样式化
- 如何在 AngularJS 中展开表格以手风琴样式添加更多信息
- 自定义样式不影响嵌套手风琴如何修复