Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularJS ng-repeat with no html element

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.

like image 201
nehz Avatar asked Oct 12 '12 11:10

nehz


People also ask

What can I use instead of NG-repeat?

And you should consider using ng-repeat with pagination. You can consider using transclusion inside a custom directive, to achieve the behavior you are looking for without using ng-repeat.

How do you pass an index in NG-repeat?

Each ng-repeat creates a child scope with the passed data, and also adds an additional $index variable in that scope. So what you need to do is reach up to the parent scope, and use that $index . Save this answer.

Why is NG-repeat not working?

Solution 1. There are two mistakes in your code: In your table, you have to wrap the properties between {{ and }}, for example {{employee. Fname}} instead of just employee.

What is difference between ng-repeat and Ng options?

ng-repeat creates a new scope for each iteration so will not perform as well as ng-options. For small lists, it will not matter, but larger lists should use ng-options. Apart from that, It provides lot of flexibility in specifying iterator and offers performance benefits over ng-repeat.


1 Answers

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.

like image 159
jmagnusson Avatar answered Oct 12 '22 03:10

jmagnusson