AngularJS ng-repeat grid of two divs per row

Question

I want to load data from an array and display two divs per row.

Eg: say there are 8 objects. I want them to appear in four rows of two

1 2

3 4

5 6

7 8

Code:

<div ng-repeat="accObj in accountsArr" width="100%">
    <div class="col" width="100%">
    <div  ng-if="$even" style="width:50%;height:70px;background-color:red">
    {{accObj.account}}<br>
    {{accObj.type}}
    </div>
    <div  ng-if="$odd" style="width:50%;height:70px;background-color:yellow">
    {{accObj.account}}<br>
    {{accObj.type}}
    </div>

    </div>
    </div>

This is how my code works at the moment. Plnkr

Can someone please guide me how to get the desired result?

Any help is highly appreciated.

Answer 1

You have to apply simple CSS to keep them side by side.There are multiple ways to achieve it. One of them is to use <span> tag:

<span style="margin:4px">{{accObj.account}}</span>
<span style="margin:4px">{{accObj.type}}</span>

Example here.

Use margin of your choice.

Answer 2

It is CSS issue - Just add float:left; to style of both divs & it will work.