AngularJS：两列 odd/even 布局

Question

在 AngularJS 中尝试获得重复的两列布局时遇到问题。我的数据集是一个 JSON 的图像信息对象。我想显示两列图像布局。无论我如何调整，我的 odd/even 逻辑都有问题，但我似乎无法弄清楚。我做错了什么？

.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 指令。同时删除具有 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

我猜你已经得到了答案，但这里还有一些可能有用的替代方法：

简单的 ng-class - 它更灵活一些，因此您可能会发现它在其他情况下也很有用。在这种情况下：
```
<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" 或类似的东西。
由于这是一个样式问题，您可能想尝试在 css 中解决它。只要您认为 IE 6-8 应该死，您就可以使用 nth-child 选择器：
```
:nth-child(odd) { ... }
:nth-child(event) { ... }
```

此外，由于我和 Pankaj 的回答都删除了您的 group class，这里有一些更简单的 css，您可以改用它：

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

或者，如果您不完全使用 IE，您可以使用 flexbox（这消除了对 any JS 的需求）：

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

AngularJS：两列 odd/even 布局

AngularJS: Two-column odd/even layout

css

angularjs

onsen-ui

responsive