javascript - ng-repeat 不重复特定元素

Question

我正在使用 Angularjs 重复 HTML 中的一些元素。 Angular 可以正确重复 div，但是当尝试重复特定 div 时，它不起作用。代码后的说明:

<tr ng-repeat="x in controlList" class="tr-shadow">
   <td>{{x.fecha_control}} </td>
   <td>{{x.hora}}</td>
   <td class="desc">{{x.valor}}</td>
   <td><span class="block-background level-color--{{x.color}} ">{{x.texto}} </span></td>
   <td>
      <span class="status">{{x.momento}} </span>
   </td>
   <td>
      <div class="table-data-feature">
         <button ng-click="editControl($event)" id="{{x.id}}" class="item" data-toggle="tooltip" data-placement="top" title="Edit">
         <i class="zmdi zmdi-edit"></i>
         </button>
         <button class="item" data-toggle="tooltip" data-placement="top" title="Delete">
         <i class="zmdi zmdi-delete"></i>
         </button>
      </div>
   </td>
<tr class="spacer"></tr>
</tr>

Angular 重复 <tr ng-repeat="x in controlList" class="tr-shadow"> </tr> 中的所有内容但是最后一个div <tr class="spacer"></tr>

如果我注释间隔符，ng-repeat它会重复间隔符，但如果我不这样做，间隔符仅在重复代码的末尾显示一次.

<!--  <tr class="spacer"></tr> -->

我尝试更改 spacer 的 HTML 标记，但遇到了同样的问题。正如您在 Chrome 的调试器中看到的，间隔符显示在重复代码之后:

Answer 1

如果您确实想在迭代中包含间隔符，还有另一个选项，称为 ng-repeat-start 和 ng-repeat-end

像下面这样的东西应该可以工作

<tr ng-repeat-start="x in controlList" class="tr-shadow">
   <td>{{x.fecha_control}} </td>
   <td>{{x.hora}}</td>
   <td class="desc">{{x.valor}}</td>
   <td><span class="block-background level-color--{{x.color}} ">{{x.texto}} </span></td>
   <td>
      <span class="status">{{x.momento}} </span>
   </td>
   <td>
      <div class="table-data-feature">
         <button ng-click="editControl($event)" id="{{x.id}}" class="item" data-toggle="tooltip" data-placement="top" title="Edit">
         <i class="zmdi zmdi-edit"></i>
         </button>
         <button class="item" data-toggle="tooltip" data-placement="top" title="Delete">
         <i class="zmdi zmdi-delete"></i>
         </button>
      </div>
   </td>
</tr>
<tr class="spacer" ng-repeat-end>...</tr>

You can find this exact information here on their documentation page.