ng-repeat从左到右重复更改位置

Question

我有一个角度ng-repeat和bootstrap的问题。我尝试将视图分为两部分左图像，右边描述，但下一行是对面，左边描述和右图像。我想要下面的图片

<div class="container">
  <div class="row">
    <div ng-repeat="item in items">
      <div class="col-xs-6">
        <img src="{{item.image}}" alt="#"/>
      </div>
      <div class="col-xs-6">
        <div class="description">
          <p>{{item.description}}</p>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

您可以在重复循环中检查奇数或偶数迭代，并分别向左或向右浮动应用您的类。

<div class="container">
  <div class="row">
    <div ng-repeat="item in items" ng-class-odd="'img-left'">
      <div class="col-xs-6 img-holder">
        <img src=".." alt="#"/>
      </div>
      <div class="col-xs-6 text-holder">
        <div class="description">
          <p>........</p>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

 .img-left .img-holder{
    float:left;
    }
    .img-left .text-holder{
    float:right;
    }

你可以直接在CSS或类似的情况下处理条件。

Answer 2

这是我的解决方案。使用ng-class，我们检查当前索引（$index）除以2是否为零，然后我们添加浮点类.left或.right。

JSFiddle Demo

<div ng-controller='MyController'>
    <div ng-repeat="val in arr">
      <div class="row clearfix">
        <div class="col-xs-6" ng-class="$index % 2 === 0 ? 'left':'right'">
          {{val}}
        </div>
        <div class="col-xs-6" ng-class="$index % 2 === 0 ? 'right':'left'">
          <img src="http://lorempixel.com/400/200/" alt="">
        </div>
      </div>
    </div>
</div>