没有 html 元素的 AngularJS ng-repeat [英] AngularJS ng-repeat with no html element

问题描述

我目前正在使用这段代码来呈现一个列表:

<div ng-repeat="n 在列表中"><li><a href="{{ n[1] }}">{{ n[0] }}</a></li><li class="divider"></i>

<li>附加项目</li>

但是，

元素在某些浏览器上会导致一些非常小的渲染缺陷.我想知道有没有办法在没有 div 容器的情况下进行 ng-repeat 操作，或者有其他方法可以达到相同的效果.

解决方案

正如 Andy Joslin 所说，他们正在研究基于评论的 ng-repeat 但显然浏览器问题太多.幸运的是，AngularJS 1.2 使用新指令 ng-repeat-start 和 ng-repeat-end 添加了对重复的内置支持，而无需添加子元素.

这是一个添加Bootstrap分页的小例子:

<li><a href="#">&laquo;</a><li ng-repeat-start="page in [1,2,3,4,5,6]"><a href="#">{{page}}</a></li><li ng-repeat-end class="divider"></li><li><a href="#">&raquo;</a>

可以在此处找到完整的工作示例.

John Lindquist 在他出色的 egghead.io 页面上还有一个 视频教程.

I am currently using this piece of code to render a list:

<ul ng-cloak>
    <div ng-repeat="n in list">
        <li><a href="{{ n[1] }}">{{ n[0] }}</a></li>
        <li class="divider"></i>
    </div>
    <li>Additional item</li> 
</ul>

However, the <div> element is causing some very minor rendering defects on some browsers. I would like to know is there a way to do the ng-repeat without the div container, or some alternative method to achieve the same effect.

解决方案

As Andy Joslin said they were working on comment based ng-repeats but apparently there were too many browser issues. Fortunately AngularJS 1.2 adds built-in support for repeating without adding child elements with the new directives ng-repeat-start and ng-repeat-end.

Here's a little example for adding Bootstrap pagination:

<ul class="pagination">
  <li>
    <a href="#">&laquo;</a>
  </li>
  <li ng-repeat-start="page in [1,2,3,4,5,6]"><a href="#">{{page}}</a></li>
  <li ng-repeat-end class="divider"></li>
  <li>
    <a href="#">&raquo;</a>
  </li>
</ul>

A full working example can be found here.

John Lindquist also has a video tutorial of this over at his excellent egghead.io page.

这篇关于没有 html 元素的 AngularJS ng-repeat的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！