twitter-bootstrap - 我如何将 AngularJS ng-repeat 与 Twitter Bootstrap 的脚手架一起使用？

Question

我将如何使用 AngularJS ng-repeat显示以下 HTML(Twitter Bootstrap Scaffolding)？从本质上讲，每三条记录我需要关闭 </div> , 打印 <hr> ，然后打开另一个<div class="span4">

    <div class="row">
      <div class="span4">
        <h3>
          Project A
        </h3>
      </div>
      <div class="span4">
        <h3>
          Project B
        </h3>
      </div>
      <div class="span4">
        <h3>
          Project C
        </h3>
      </div>
    </div>

    <hr>

    <div class="row">
      <div class="span4">
        <h3>
          Project D
        </h3>
      </div>
      <div class="span4">
        <h3>
          Lab Title
        </h3>
      </div>
      <div class="span4">
        <h3>
          Project E
        </h3>
      </div>
    </div>

我为代码演示创建了一个 fiddle 。
http://jsfiddle.net/ADukg/261/

Answer 1

这里有一个方法:

<div ng-controller="MyCtrl">
  <div ng-repeat="project in projects">
    <span ng-if="$index % 3 == 0">
      <hr />
      <div class="row">
        <h3 class="span4" ng-if="projects[$index+0]">{{projects[$index+0]}}</h3>
        <h3 class="span4" ng-if="projects[$index+1]">{{projects[$index+1]}}</h3>
        <h3 class="span4" ng-if="projects[$index+2]">{{projects[$index+2]}}</h3>
      </div>
    </span>
  </div>
</div>

如果您有例如 7 个数据项，这种方式也可以工作:在最后 3 个数据上，它只会显示第 7 项，而不尝试显示不存在的第 8 项和第 9 项。

http://jsfiddle.net/4LhN9/68/

编辑 : 更新为使用 ng-if & angular 1.2.12