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
Mahesh de silva
source
to share
2 answers
This is a CSS problem. Just add float:left;
in style
both divs and it will work.
+1
Vintesh
source
to share
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
Rahul R.
source
to share