In my current project, I am trying to enhance the layout by inserting a <br/> tag after every nth element. The desired structure is as follows:
<div class="container">
<div>
<span>1</span>
<span>2</span>
<br/>
<span>3</span>
</div>
</div>
The approach I initially took was inspired by how I have utilized ng-repeat with <ul/> elements in the past, like so:
<div class="container">
<ul ng-repeat="item in list">
<li>{{item}}</li>
</ul>
</div>
which normally generates a list similar to this:
<div class="container">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
However, when attempting something comparable using <div/>:
<div class="container">
<div ng-repeat="item in list">
<span>{{item}}</span>
</div>
</div>
I noticed a discrepancy from the behavior observed with <ul/>. It results in:
<div class="container">
<div>
<span>1</span>
</div>
<div>
<span>2</span>
</div>
<div>
<span>3</span>
</div>
</div>
This leads to two questions:
- Why does ng-repeat behave differently on a
<ul/>compared to a<div/> - Is there a way to achieve multiple span elements followed by a line break without enclosing each span within a separate div?