twitter-bootstrap - 在 1d 数组上使用 ng-repeat 创建具有固定宽度的 2d 显示

Question

是否可以使用以下方法在引导程序上创建类似[1,2,3,4,5,6,7,8,9] 并创建以下内容ngRepeat：

<div class="row-fluid">
<div class="span4">1</div>
<div class="span4">2</div>
<div class="span4">3</div>
</div>
<div class="row-fluid">
<div class="span4">4</div>
<div class="span4">5</div>
<div class="span4">6</div>
</div>
<div class="row-fluid">
<div class="span4">7</div>
<div class="span4">8</div>
<div class="span4">9</div>
</div>

Answer 1

例如，如果您将列表放在一个名为的范围变量中，myList那么您可以使用看起来像这样的手表

$scope.rows = [];
$scope.$watchCollection('myList', function(source) {
  $scope.rows = [];
  for(var i=0; i<source.length; i+=3) {
    var row = [];
    for(var j=i; j<i+3 && j<source.length; j++) {
      row.push(source[j]);
    }
    $scope.rows.push(row);
  }
});

维护拆分为行的列表版本（方便地称为rows）。这可以在nested 中使用ng-repeat来做你想做的事。我在这里写了一个例子。您可能需要展开预览窗口以使spans 显示在正确的行上，但标记是正确的。这只是引导程序响应。

这只是一个例子，展示了你如何去做——我同意@defau1t，你应该为此创建一个指令。

编辑：此处的示例指令