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>

如果我评论 spacer ng-repeat 它会重复 spacer，但如果我不这样做，spacer 只会显示在重复代码的末尾一次。

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

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

Answer 1

<tr> 在 <tr> 内无效 html。您必须包括 ng-class="{'spacer': someCondition}"

<tr ng-repeat="x in controlList" class="tr-shadow" ng-class="{'spacer': someCondition}>

Answer 2

尝试将条件 ng-if="$last" 添加到您的间隔符

Answer 3

如果你真的想在你的迭代中包含你的间隔符，还有另一个选项叫做 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.

ng-repeat 不重复特定元素

ng-repeat not repeating specific element

html

javascript

angularjs

angular-template