AngularJS: Двухстоечный нечетный/четный макет

Question

Ошибка при попытке получить повторяющийся двухколоночный макет в AngularJS. Мой набор данных - это объект информации об объекте JSON. Я хочу показать двухкамерный макет изображений. Независимо от того, что я настраиваю, что-то не так в моей нечетной/четкой логике, но я не могу понять это. Что я делаю не так?

.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

Проблема с кодом вы были обернуть логику внутри

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

Div, который ограничивающий показать нечетную логику DIV.

вместо двух разных div, я бы сказал, используя ngClassEven & ngClassOdd директива. Также удалите обертку div, которая имеет состояние ng-if="$even".

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

Answer 2

Я думаю, вы уже получили ответ на свой вопрос, но все-таки здесь есть несколько альтернатив, которые могут оказаться полезными:

1. Просто нг-класс - это немного более гибким, так что вы можете найти полезным в других случаях. В этом случае:

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

   или

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

   Заметим, что в отличие от некоторых других свойств ng-class может сосуществовать с class в гармонии, чтобы вы могли добавить class="item" или что-то подобное.

2. Так как это проблема с дизайном, вы можете попробовать ее решить в css. До тех пор, как вы думаете, IE 6-8 должен умереть вы можете использовать nth-child селектор:

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

Кроме того, так как оба мои и ответы Панкай вынимается ваш group класс здесь некоторые простой CSS, которые вы могли бы использовать вместо:

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

Или снова, если вы не все о IE вы можете использовать Flexbox (что исключает необходимость в любой JS):

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