AngularJS: Is there a way to use ng-repeat to create rows and columns from the same array of data?

Question

I am attempting to create a loop that will run through an array and output the data into rows/columns. For each two items in the array, i'd like it to create a new row with two columns, like this:

<div class="row">
   <div class="col">1</div>
   <div class="col">2</div>
</div>

Here is an example of my array:

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

So, the overall end want would look like this:

<div class="row">
   <div class="col">1</div>
   <div class="col">2</div>
</div>
<div class="row">
   <div class="col">3</div>
   <div class="col">4</div>
</div>
<div class="row">
   <div class="col">5</div>
   <div class="col">6</div>
</div>
<div class="row">
   <div class="col">7</div>
   <div class="col">8</div>
</div>
<div class="row">
   <div class="col">9</div>
</div>

This is what I had originally attempted, but it was only showing up one column.

<div ng-repeat="item in array">
   <div ng-if="$index % 2 === 0" class="row">
      <div class="col">{{item}}</div>
   </div>
</div>

Any additional thoughts or direction on how I can achieve this? Thanks.

It might be better to use a two-dimensional array.

yujinpan
– yujinpan

2019-04-12 02:51:05 +00:00
Commented Apr 12, 2019 at 2:51 — yujinpan
– yujinpan, Commented Apr 12, 2019 at 2:51
Could you provide sample output? Thanks

Rasel Ahmed
– Rasel Ahmed

2019-04-12 05:58:43 +00:00
Commented Apr 12, 2019 at 5:58 — Rasel Ahmed
– Rasel Ahmed, Commented Apr 12, 2019 at 5:58

MTL-VRN · Accepted Answer · 2019-04-12 15:10:45Z

1

You were very close! Try this:

<div ng-repeat="item in array">
   <div ng-if="$index % 2 === 0" class="row">
      <div class="col">{{item}}</div>
      <div ng-if="$index + 1 < array.length" class="col">
         {{array[$index + 1]}}
      </div>
   </div>
</div>

All that you were missing was the second column.

edited Apr 12, 2019 at 15:10

answered Apr 12, 2019 at 15:04

MTL-VRN

3931 silver badge14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS: Is there a way to use ng-repeat to create rows and columns from the same array of data?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related