AngularJS ng-repeat with no html element

angularjs, css, html, javascript

Solution

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.

Problem

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.

Original source