我正在使用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的调试器中看到的那样,在重复的代码之后显示间隔符:
答案 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-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>
您可以在其文档页面here上找到确切的信息。
答案 2 :(得分:0)
尝试将条件ng-if =“ $ last”添加到分隔符中