CODEWITHSUNDEEP
javascripthtmlangularjsionic-framework
sch
sch

Reputation: 1388

ng-repeat on two (or more) rows

My array:

$scope.data = [1,2,3,4,5,6,7,8,9,10];

My HTML:

<div ng-repeat="item in data track by $index">{{item}}</span>

This will output, as expected: 12345678910.

But I want to display the array over two rows, as in the following sample:

12345 // break here
678910

I run some functions on this array, so I don't want to split the array into two smaller ones, cause that would mean I have to run these other functions twice as often. I have looked into the 'start end' part of ngRepeat, but honestly, I don't understand how it works, thoughts?

Note: this is an ionic application, if that matters.

Edit: I can't get the suggested answers to work, I though I could dumb down my code, and make it work, but no. this is my full html ng-repeat code: 

<div class="row">
   <div class="col" ng-repeat="item in data track by $index">
      {{item}}
      <br ng-if="$index == 4">
   </div>
</div>

This did not work, how come? Anything with row or col?

Upvotes: 1

Views: 108

Answers (2)

gtlambert
gtlambert

Reputation: 11961

You could use ng-if to insert a new line when the $index is equal to 4:

<div class="col"> 
    <span ng-repeat="item in data track by $index">
        {{item}}
        <br ng-if="$index==4">
    </span>
</div>

Here, we also move the ng-repeat to a span element inside the div. This solves any potential issues which may arise from the styling applied to the div.

Upvotes: 1

glcheetham
glcheetham

Reputation: 1003

You could also experiment with item.$middle.

item.$middle: true if the repeated element is between the first and last in the iterator

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

<div ng-repeat="item in data track by $index">
    {{item}} <br ng-if="item.$middle" />
</div>

?

Upvotes: 0

Related Questions