我如何在Twitter Bootstrap的脚手架中使用AngularJS ng-repeat？

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>

我为代码演示创建了一个小提琴.
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

Answer 2

从更简单的答案继续前进.我不喜欢原始的解决方案,因为它产生了空的dom元素.这是每行3个div.

<div ng-controller="ModulesCtrl">
    <div class="row" ng-repeat="i in fields.range()">
        <div class="span4" ng-repeat="field in fields.slice(i,i+3)">
            <h2>{{field}}</h2>
        </div>
    </div>
</div>

在函数FieldsCtrl($ scope)中:

$scope.fields.range = function() {
    var range = [];
    for( var i = 0; i < $scope.fields.length; i = i + 3 )
        range.push(i);
    return range;
}

如果你知道fields.length你可以代替fields.range()使用[0,3,6,9]等

Answer 3

更优雅的方法是使用视图模型来提供分块集合,然后让视图处理它

<div ng-controller="Controller">
    Projects <input ng-model="projects"></input>
    <hr/>
    <div ng-repeat="row in rows">
        <div ng-repeat="project in row">
            Projects {{project}}
        </div>
        <hr/>
    </div>
</div>?

而咖啡因很简单

# Break up an array into even sized chunks.
chunk = (a,s)->
    if a.length == 0
        []
    else               
        ( a[i..i+s-1] for i in [0..a.length - 1 ] by s)

@Controller = ($scope)->
    $scope.projects = "ABCDEF"

    $scope.$watch "projects", ->      
       $scope.rows = chunk $scope.projects.split(""), 3

angular.bootstrap(document, []);

​

http://jsfiddle.net/ADukg/370/