html - 如果 mod N 列，则使用 ng-repeat 和 创建一个新的表行

Question

我正在尝试使用 ng-repeat 创建两列。我有一个项目列表，即 ['green', 'red', 'blue', 'yellow'] 并且想创建两列，每列有两个项目。但是，如果当前索引是 mod 2，我不确定如何开始新行。

green   red
blue    yellow

有没有办法做到这一点？

Answer 1

我会在将数据传递给 DOM 之前准备好数据，您可以在网上找到很多“ block ”实现

['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/