Question

我尝试使用 ng-repeat 创建两列。我有一个项目列表，即[＆＃39;绿色＆＃39;，＆＃39;红色＆＃39;，＆＃39;蓝色＆＃39;黄色＆＃39;]并想要创建两列每个都有两个项目。但是，如果当前索引是mod 2，我不确定如何开始新行。

green   red
blue    yellow

有没有办法做到这一点？

Answer 1

我只是在将数据传递给DOM之前准备好数据，你可以在网上找到很多“块”实现

['green', 'red', 'blue', 'yellow']

split into suitable chunks:
[ [ "green", "red" ], [ "blue", "yellow" ] ]

代码：

<div data-ng-controller="MyCtrl">
    <table>
        <tr data-ng-repeat="row in tableData">
            <td data-ng-repeat="color in row">
                {{ color }}
            </td>
        </tr>
    </table>
</div>

<script>
var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.colors = ['green', 'red', 'blue', 'yellow'];
    $scope.tableData = chunk($scope.colors, 2);
}

function chunk (arr, len) {
  var chunks = [],
      i = 0,
      n = arr.length;
  while (i < n) {
    chunks.push(arr.slice(i, i += len));
  }
  return chunks;
}
</script>

输出

green   red
blue    yellow

http://jsfiddle.net/oyz0f07n/

Answer 2

您可以通过css控制它

如果您使用的是bootstrap

<div class="row">
    <div data-ng-repeat="color in colors" class="col-md-6"> {{ color }} </div>
</div>

如果您不使用bootstrap，可以在css中设置50％宽度的类，并在div中添加该类。像这样的东西

CSS

.width-50 {
    width: 50%;
}

HTML

    <div data-ng-repeat="color in colors" class="width-50"> {{ color }} </div>

使用ng-repeat和mod N列创建新表行

2 个答案: