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，我會說使用ngClassEven & ngClassOdd指令。也刪除具有ng-if="$even"條件的包裝div。

<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%; 
    } 
}