Question

我是使用AngularJS的初学者。

我想在我的HTML代码中使用一个特定的指令渲染一个集合：左边是一个项目，右边是一个项目，左边是第三个...等等。

<div ng-repeat="Model in Collection">

  <!-- The HTML i need for even iterations -->
  <div class="col-xs-2.col-sm-2.col-md-2.col-lg-2.col-xs-offset-2.col-sm-offset-2.col-md-offset-2.col-lg-offset-2">
    <img alt="Player" src="{{Model.avatar}}" popover-placement="left">
  </div>

  <!-- The HTML i need for odd iterations -->
  <div class="col-xs-2.col-sm-2.col-md-2.col-lg-2.col-xs-offset-8.col-sm-offset-8.col-md-offset-8.col-lg-offset-8">
    <img alt="Player" src="{{Model.avatar}}" popover-placement="right">
  </div>

</div>

有什么更好的方法呢？

Answer 1

你可以利用ng-class-odd和ng-class-even来声明div的类。

<div ng-repeat="Model in Collection">

  <div ng-class-even="'col-xs-2.col-sm-2.col-md-2.col-lg-2.col-xs-offset-2.col-sm-offset-2.col-md-offset-2.col-lg-offset-2'" 
       ng-class-odd="'col-xs-2.col-sm-2.col-md-2.col-lg-2.col-xs-offset-8.col-sm-offset-8.col-md-offset-8.col-lg-offset-8'">
    <img alt="Player" src="{{Model.avatar}}" ng-class-even="'left'" ng-class-odd="'right'">
  </div>

</div>

一次两次渲染不同类的集合

1 个答案: