CODEWITHSUNDEEP
javascripthtmlangularjsangularjs-directiveangularjs-ng-repeat
Rohan
Rohan

Reputation: 1352

ng-repeat li have extra line after each repetition

When I use the angular ng-repeat directive with an <li> element, I get an extra line after each <li>. Simple example with pictures below.

Simple example using angular ng-repeat directive: 

<ul class="list-group" ng-repeat = "num in [0,1,2,3,4]">
    <li class="list-group-item list-group-item-success">{{num}}</li>
</ul>

Will create something like : enter image description here

However doing it without angular ng-repeat such as

<ul class="list-group">
    <li class="list-group-item list-group-item-success">1</li>
    <li class="list-group-item list-group-item-success">2</li>
    <li class="list-group-item list-group-item-success">3</li>
    <li class="list-group-item list-group-item-success">4A</li>
</ul>

results in enter image description here

As you can tell, when I use the ng-repeat directive, I get an extra line below each repeated element. Is there a subtlety that I am missing or does anyone know how to remove the extra line?

Upvotes: 3

Views: 859

Answers (1)

scniro
scniro

Reputation: 16989

You're repeating your <ul> element in your current markup. The visual difference is because you are essentially rendering something like this...

<ul>
    <li>0</li>
</ul>
<ul>
    <li>1</li>
</ul>
<ul>
    <li>2</li>
</ul>
...

Instead, change to the following and ng-repeat your <li>

<ul class="list-group" >
    <li ng-repeat="num in [0,1,2,3,4]" class="list-group-item list-group-item-success">{{num}}</li>
</ul>

Upvotes: 6

Related Questions