Thom Yorke Thom Yorke - 4 months ago 61
AngularJS Question

AngularJS: Two-column odd/even layout

Having a problem trying to get a repeating two-column layout in AngularJS. My dataset is a JSON object of image information. I want to show a two column layout of images. No matter what I tweak, something is wrong in my odd/even logic, but I can't seem to figure it out. What am I doing wrong?



.left {
float: left !important;
width: 50% !important;
}
.right {
float: right !important;
width: 50% !important;
}
.group:after {
content:"";
display: table;
clear: both;
}
img {
max-width: 100%;
height: auto;
}
@media screen and (max-width: 480px) {
.left,
.right {
float: none;
width: auto;
}
}

<div ng-repeat="issue in issues">
<div ng-if="$even" class="group">
<div class="left" ng-if="$even">
<img src="{{ issue.image }}" ng-src="{{ issue.image }}">
</div>
<div class="right" ng-if="$odd">
<img src="{{ issue.image }}" ng-src="{{ issue.image }}">
</div>
</div>
</div>




Answer

The issue with code is you had wrap your logic inside

<div ng-if="$even" class="group">

Div which is restricting to show odd logic div.

instead of having two different div, I'd say use ngClassEven & ngClassOdd directive. Also remove the wrapper div which has ng-if="$even" condition.

<div ng-repeat="issue in issues">
    <div ng-class-even="'left'" ng-class-odd="'right'">
        <img ng-src="{{ issue.image }}">
    </div>
</div>