将 Twitter Bootstrap 的 .row 元素与 ng-repeat 一起使用

Question

我的 AngularJS 应用中有以下 sn-p：

<div ng-repeat="proverb in proverbs">
  <div class="col-sm-6">
    <div class="alert alert-warning">
      <a href="#/{{langID}}/{{$index}}">{{proverb}}</a>
    </div>
  </div>
</div>

这将为我的proverbs 数组中的每个proverb 生成一个div 元素，其类为col-sm-6。我的意图是在屏幕足够大时显示两列。

尽管没有使用 Bootstrap 的 .row 元素，但上面的 sn-p 完全按照预期工作。

问题是，我怎样才能包含一个 .row 元素，它只会在 ng-repeat 的每第二次迭代中出现一次，以便我得到以下最终结果：

<div class="row">
  <div class="col-sm-6">
    <div class="alert alert-warning">
      <a href="#/{{langID}}/{{$index}}">{{proverb}}</a>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="alert alert-warning">
      <a href="#/{{langID}}/{{$index}}">{{proverb}}</a>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-sm-6">
    <div class="alert alert-warning">
      <a href="#/{{langID}}/{{$index}}">{{proverb}}</a>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="alert alert-warning">
      <a href="#/{{langID}}/{{$index}}">{{proverb}}</a>
    </div>
  </div>
</div>

此外，鉴于 Bootstrap 中 .col 元素的跨度总和大于 12 时，下一个元素会被下推，除了保证新行之外，还有任何理由使用 .row 类在所有列完全填满之前生成？

Answer 1

如果你不需要 .row 那么你可以做this

<div ng-repeat="proverb in proverbs">
  <div class="col-sm-6">
    <div class="alert alert-warning">
      <a href="#/{{langID}}/{{$index}}">{{proverb}}</a>
      <ng-show="$index % 2 == 0" br/>
    </div>
  </div>
</div>