脱离html元素的AngularJS ng-repeat

StackOverflow地址

http://stackoverflow.com/questions/12857714/angularjs-ng-repeat-with-no-html-element

问题描述

楼主使用下面的代码生成一个列表：

<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>

然而，<div>元素在一些浏览器中会导致一些细微的显示差异。楼主想知道是否有办法在执行ng-repeat循环时不带上div容器，或者是否有什么其他手段实现同样的效果。

最佳解答

幸运的是AngularJS1.2版本加入了一个内置的repeating支持，且不需要增加子容器，使用ng-repeat-start和ng-repeat-end这两个新directive就可以了。
下面是一个增加Bootstrap分页的小例子：

<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>

完整的例子在这里。
John Lindquist还提供了一个有关于此的视频教程。