Angularjs ng-repeat and child elements

Question

I'm attempting to insert a <br/> every nth element to achieve something like this (using ng-repeat and ng-if="!($index % 2)"):

<div class="container">
    <div>
        <span>1</span>
        <span>2</span>
        <br/>
        <span>3</span>
    </div>
</div>

I thought I could mimic how i've used ng-repeat in the past for <ul/> elements, as so:

<div class="container">
    <ul ng-repeat="item in list">
        <li>{{item}}</li>
    </ul>
</div>

which produces a list such as this:

<div class="container">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

Yet when I attempt to do something like this:

<div class="container">
    <div ng-repeat="item in list">
        <span>{{item}}</span>
    </div>
</div>

I get this differing result from the <ul/> usecase:

<div class="container">
    <div>
        <span>1</span>
    </div>
    <div>
        <span>2</span>
    </div>
    <div>
        <span>3</span>
    </div>
</div>

The question is two-fold:

• Why does the ng-repeat directive on a <ul/> behave differently
• How can I have multiple span elements then a break without wrapping each span in a div?

Answer 1

https://docs.angularjs.org/api/ng/directive/ngRepeat

The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key.

In your loop, your 'item' has following local variables: $index, $first, $middle, $last, $even, $odd. Each except $index returns a boolean value that tells you if the item is, for example, $odd. Also take a look at the directive ngClassEven.

Answer 2

ng-repeat acts equal to any tag, maybe the presatantion of ul creates confusion,

look next example:

http://plnkr.co/edit/ig766DNNlQXihNS5ZGdY?p=preview

im separated:

 <ul class="example-animate-container">
<li class="animate-repeat" ng-repeat="friend in friends">

and

<legeng>ul - ng repeat</legeng>
<ul class="example-animate-container" ng-repeat="friend in friends">

Answer 3

Try this.

<div ng-repeat="num in [1,2,3,4,5,6]">
  <div>{{num}}</div>
  <div ng-if="$index%2">whatever you want</div>
</div>

Result looks something like this.

1
2
whatever you want
3
4
whatever you want
5
6
whatever you want

Answer 4

Update:

If you want to insert a <br> every nth <span> then you can change your HTML to the following:

<div id="container">
    <span ng-repeat="item in list">{{item}}

          <br ng-if="$index % 2">
     </span>
</div>

Tested in Firefox,Chrome,and Internet Explorer the results look like this:

12
34
56

All you have to do is remove the surrounding div elements and then change your html to the following(live preview: http://codepen.io/larryjoelane/pen/qbJXJm). The ng-repeat directive duplicates the number of child elements that are contained within the parent element. The <li> elements in your example do not contain any child elements. In other words <li> elements are child elements of the <ul> element by default. However <span> elements are not child elements of <div> elements by default. You will see similar behavior when you use ng-repeat for other elements like the <table> element and its <tr> and <td> tags.

HTML:

<div ng-app="app" ng-controller="spans">

   <div id="container">
        <span ng-repeat="item in list">{{item}}
          </span>
  </div> 

      </div>

Angular/JavaScript:

angular.module("app", []).controller("spans", ["$scope", function($scope) {

  $scope.list = [1, 2, 3, 4, 5, 6];

}]);

And if you want each span to have a line break then apply the following CSS:

#container span {
  display: block;
}