javascript - AngularJS - 一级数组上的 ng-repeat 表格

Question

我有一个包含 N 个元素的数组:

$scope.arr = ["1","2","3" ... ,"N"]

我需要用它制作一个包含 X 列和 N/X 行的表格。

我可以使用ng-repeat来实现它吗？

我知道我可以将数组操作为这种格式:
$scope.arr = [["1","2","3"], ["4","5","6"] ...] 然后我可以使用嵌套ng-重复。

但我想知道是否可能用一个单级数组来实现。

Answer 1

var app = angular.module('app', []);

app.controller('homeCtrl', function($scope) {

  $scope.x = 3;

  $scope.arr = [];

  for (i = 0; i < 100; i++) {
    $scope.arr.push(i)
  }

  $scope.getColumns = function() {

    return new Array($scope.x)

  }

  $scope.getRows = function() {

    return new Array(Math.ceil(($scope.arr.length) / $scope.x))

  }

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="homeCtrl">
    Columns:
    <input type="number" ng-model="x" />

    <table border="1">
      <tr ng-repeat="i in getRows() track by $index" ng-init="idx = $index">
        <td ng-repeat="c in getColumns() track by $index" ng-init="idy=$index">{{arr[(idx*x)+idy]}}</td>
      </tr>
    </table>

  </div>
</div>