AngularJS ng-repeat with no html element

By : nehz

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>
    <li>Additional item</li> 

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.

By : nehz


There is no Angular magic way to do this, for your case you can do this, to get valid HTML, if you are using Bootstrap. Then you will get same effect as adding the li.divider

Create a class:

span.divider {
 display: block;

Now change your code to this:

There is a comment directive restriction, but ngRepeat doesn't support it (since it needs an element to repeat).

I think I saw the angular team say they would work on comment ng-repeats, but I'm not sure. You should open an issue for it on the repo.

This video can help you solving your question :)
By: admin