如何扩展表以在AngularJS中以手风琴样式添加更多信息

Question

我一直在做很多打嗝工作.基本上我希望能够点击我桌子上的一行来扩展该行,并在那里提供其他信息.我希望它是一个切换的手风琴风格(抽屉),所以我可以一次打开多个.代码如下.

<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

谢谢.

Answer 1

您可以使用angular-ui-bootstrap，它提供了一组基于 Twitter Bootstrap 标记和 CSS 的 AngularJS 指令，并使用ng-repeaton迭代您的数据<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