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）。这可以在嵌套ng-repeat中使用，以执行您想要的操作。我写了一个例子here。您可能需要展开预览窗口以使span显示在正确的行上，但标记是正确的。这只是引导响应。

这只是一个展示你如何做到这一点的例子 - 我同意@ defau1t你应该为此创建一个指令。

编辑：示例指令here

在1d阵列上使用ng-repeat创建具有固定宽度的2d显示

1 个答案: