AngularJS：两列奇/偶布局

Question

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 1

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>

Answer 2

I guess you already got your answer, but still here are some alternatives which may prove useful:

1. Simply ng-class - it's a little more flexible, so you may find it useful in other cases too. In this case:

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

   or

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

   Note that unlike some other properties ng-class can coexist with class in harmony so you could also add class="item" or something similar.

2. Since it's a styling issue you may want to try to solve it in css. As long as you think IE 6-8 should die you can use the nth-child selector:

    :nth-child(odd) { ... } :nth-child(event) { ... } 

Also since both my and Pankaj's answers removed your group class here is some simpler css which you could use instead:

.item {
    float: left;
    width: 50%;
}
.left {
    clear: left;
}
@media screen and (max-width: 480px) {
    .item {
        float: none;
        width: auto;
    }
}

Or again if you're not all about IE you could use flexbox (which removes the need for any JS):

.parent {
    display: flex;
    flex-wrap: wrap;
}
.item {
    flex: 0 0 50%;
}
@media screen and (max-width: 480px) {
    .item {
        flex-basis: 100%;
    }
}