Clever Geek Handbook

AngularJS ng-repeat grid of two divs per line

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

For example: there are 8 objects. I want them to be displayed on four lines of two

12

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 anyone advise me how to get the desired result?

Any help is appreciated.

+3


source to share


2 answers


This is a CSS problem. Just add float:left;

in style

both divs and it will work.



+1


source


You need to apply some simple CSS to keep them side by side. There are several ways to achieve it. One of them is to use a tag <span>

:

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


An example is here.

Use the margin of your choice.

+2


source






More articles:


All Articles