如何在 AngularJS 中以手风琴风格扩展表格以添加更多信息答案

【问题标题】：How to expand a table to add more information in an accordion style in AngularJS如何在 AngularJS 中以手风琴风格扩展表格以添加更多信息
【发布时间】：2015-06-19 10:01:45
【问题描述】：

我在完成这项工作时遇到了很多麻烦。本质上，我希望能够单击表格上的一行来展开该行并在其中提供其他信息。我希望它是一种可切换的手风琴风格（抽屉），所以我可以一次打开多个。代码如下。

<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

谢谢。

【问题讨论】：

以什么方式展开什么？演示没有额外的数据尚未显示
本质上是这样的。 jsfiddle.net/Pixic/VGgbq 但是我希望能够一次扩展多个。

标签： javascript angularjs accordion

【解决方案1】：

您可以使用 angular-ui-bootstrap，它提供了一组基于 Twitter Bootstrap 标记和 CSS 的 AngularJS 指令，并使用 <accordion> 上的 ng-repeat 遍历您的数据。

  <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

【讨论】：

知道如何在手风琴的主体中添加数据表

【解决方案2】：

看来我想通了。通过使用 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>

这样单击单元格将触发展开/折叠。

【讨论】：