Clever Geek Handbook

Ng-repeat li has an extra line after each repetition

When I use angular directive ng-repeat

with an element <li>

, I get an extra line after each one <li>

. Simple example with pictures below.

Simple example using angular directive ng-repeat

:

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

Let's create something like: enter image description here

However, do it without angular ng-repeat

, for example

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

leads to enter image description here

As you can tell, when I use the directive ng-repeat

, I get an extra line below each repeating element. Do I have subtlety or do I know how to remove the extra line?

+3


source to share


1 answer


You are repeating your element <ul>

in your current markup. The visual difference is that 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

yours<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>
+6


source






More articles:


All Articles