Question

我正在使用bootstrap来完成扩展表行。

执行此操作的格式为：

<tr data-toggle="collapse" data-target="#demo1" class="accordion-toggle">
  <td>one</td>
</tr>
<tr>
  <td class="hiddenRow">
  <div class="accordian-body collapse" id="demo1">
    <table class="table table-striped">
     <thead><tr><td>Test for row one</td></tr></thead>
     <tbody><tr><td>Testing</td></tr></tbody>
    <table>
  </div>
  </td>
</tr>

如何对上面列出的整个区块进行ng-repeat？

我试过

<tr ng-repeat="x in colors track by $index" data-toggle="collapse" data-target="#demo1{{$index}}" class="accordion-toggle">
  <td>one</td>
</tr>
<tr ng-repeat="x in colors track by $index">
  <td class="hiddenRow">
  <div class="accordian-body collapse" id="demo1{{$index}}">
    <table class="table table-striped">
     <thead><tr><td>Test for row one</td></tr></thead>
     <tbody><tr><td>Testing</td></tr></tbody>
    <table>
  </div>
  </td>
</tr>

但是这样行不会在点击的行下面扩展。另外，我不得不做两个循环。我如何在一个循环中完成所有这些？

Answer 1

要迭代这两个<tr>代码，请使用ng-repeat-start和ng-repeat-end：

<tr ng-repeat-start="x in colors track by $index" data-toggle="collapse" data-target="#demo1{{$index}}" class="accordion-toggle">
  <td>one</td>
</tr>
<tr ng-repeat-end>
  <td class="hiddenRow">
  <div class="accordian-body collapse" id="demo1{{$index}}">
    <table class="table table-striped">
     <thead><tr><td>Test for row one</td></tr></thead>
     <tbody><tr><td>Testing</td></tr></tbody>
    <table>
  </div>
  </td>
</tr>

ng-repeat的好指南：https://docs.angularjs.org/api/ng/directive/ngRepeat

Answer 2

ng-repeat-start和ng-repeat-end效果很好！

我补充了隐藏/显示手风琴的角度代码，而不是数据切换/数据目标来切换css：

ng-repeat-start="customer in customers track by $index" ng-click="toggle = !toggle" ng-class="{'open' : toggle}"

，其中

$scope.toggle = 'open';

如何在可扩展表行中使用ng-repeat

2 个答案: