Question

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

代码的问题是你把你的逻辑包装在里面

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

限制显示奇数逻辑div的Div。

而不是使用两个不同的div，我会说使用ngClassEven＆amp; 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

我想你已经得到了答案，但仍然有一些可能有用的替代方案：

简单地说 - 它有点灵活，所以你可能会发现它在其他情况下也很有用。在这种情况下：
```
<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课程，因此您可以使用一些更简单的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%;
    }
}

AngularJS：两列奇数/偶数布局

2 个答案: