ng-repeat从左到右改变位置

问题描述：

我有一个问题，角ng-repeat和bootstrap。我尝试了对左侧图像的两个部分进行分割视图，右侧描述，但下一行反对，左侧描述和右侧图像。我想类似下面的图片ng-repeat从左到右改变位置

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

你是哪里的NG-重复使用 “项目”？不要看到它用在 –

以上的代码片段中例如http://jsfiddle.net/hstppbj8/182/ –

答

可以在重复循环检查奇数或偶数的迭代，并用左浮动或右分别适用您的班级。

<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或者像上面处理甚至条件。

谢谢你很好的答案，但我必须改变浮点数：留在浮点数：正确的img持有人和相同的文本因为在引导IMG默认是离开 –

@VR没关系，你可以根据需要添加你的类。这仅仅是一个例子。 –

答

这是我的解决方案。使用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>

即使在Angular中，我们也有ng-class-odd和ng-class。 –

@jigargala这对我来说是新的，谢谢，我不知道这一点，但我会坚持我给的。 –

这很好，你可以坚持你的答案。这都是关于最佳做法的。我们可以在这里避免两个ng级的条件，并在顶部使用一个条件，然后使用CSS来处理受尊敬的类的子div。 –

ng-repeat从左到右改变位置

相关推荐