ng-repeat不重复特定元素

时间:2019-03-18 09:10:16

标签: javascript html angularjs angular-template

我正在使用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 ,但是如果我不这样做,则间隔子在重复代码的末尾仅显示一次

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

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

Debugger

3 个答案:

答案 0 :(得分:2)

<tr>中的

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

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

答案 1 :(得分:2)

如果您确实想在迭代中包含间隔符,则还有一个名为ng-repeat-startng-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>
  

您可以在其文档页面here上找到确切的信息。

答案 2 :(得分:0)

尝试将条件ng-if =“ $ last”添加到分隔符中