创建包含两个（或更多）列的表，每个列具有不同的ng-repeat

Question

我需要用'n'列来建立一个表。每列都将提供来自不同阵列的信息。

每个例子，假设我有下一个数组：

$scope.first = [1, 4, 7];
$scope.second = [2, 5, 8];
$scope.third = [3, 6, 9];

我的目标是将信息显示为三个（或'n'）列：

<table align="center">
    <thead>
    <tr>
        <th colspan="3" scope="colgroup">Data</span></th>
    </tr>
    </thead>
    <tbody>
        <th>First</th>
        <th>Second/th>
         <th>Third</th>
</tbody>

当我试图通过ng-repeat上的每个数组时，问题就来了。我该怎么做才能显示我想要的信息？如果我在另一个<tbody>上传递ng-repeat，数据将显示为第一个<th>的列，但是当我正在试图传递第二个和第三个数组时，它会破坏所有内容。

我需要将其显示为日历：

有人可以帮助我吗？

我正在使用AngularJS和Javascript。

Answer 1

使用这种类型的表示来支持甚至n列：

你的阵列：

componentWillMount() {

    // fetch the data from the Google FireStore for the Category Collection
    var categoryCollection = fire.collection('Category');
    let categories = [];
    categoryCollection.get().then((snapshot)=> {
        snapshot.forEach ((doc) => {
            categories.push(doc.data());
        }); 
        if (categories.length > 0) {
            this.setState({'Categories': categories});
        }
    }).catch((error) => {
       console.log("Error in getting the data"); 
    });
    // this.setState({'Categories': categories});

}

你的桌子：

$scope.myArrays = [[1, 4, 7],[2, 5, 8],...,[3, 6, 9]]

<强>更新

显示垂直，像这样更改数组：

<table style="width:100%">
  <tr>
    <th colspan="{{myArrays.length}}" scope="colgroup">Data</th>
  </tr>
  <tr ng-repeat="array in myArrays">
    <td ng-repeat="item in array track by $index">{{item}}</td>
  </tr>
</table>

适用于n-x.n和n.n数组

Answer 2

使用单一结构表示整个事物更容易

$scope.data = [
  {name: "First", values: [1,4,7]},
  {name: "Second", values: [2,5,8]},
  {name: "Third", values: [3,6,9]},
]

// get max length of all arrays here, do it by code
$scope.maxRow = new Array(3); 

<table align="center">
    <thead>
    <tr>
        <th colspan="3" scope="colgroup">Data</span></th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th ng-repeat="column in data">{{column.name}}</th>
    </tr>
    <tr ng-repeat="row in maxRow">
        <td ng-repeat="col in data">{{col.length > row ? col.values[row] : '-'}}</td>
    </tr>
    </tbody>
</table>