使用 ng-repeat 的具有多个数组的 angularjs 表答案

【问题标题】：angularjs table with multiple arrays using ng-repeat使用 ng-repeat 的具有多个数组的 angularjs 表
【发布时间】：2017-08-01 11:30:39
【问题描述】：

我正在尝试在每列内绘制一个包含嵌套行的表格：

Set1 element1 element2 element3 element4 element5 ...element10(array1)
元素1 元素2 元素3 元素4 元素5 ...元素10（数组2）
元素1 元素2 元素3 元素4 元素5 ...元素10（数组3）
元素1 元素2 元素3 元素4 元素5 ...元素10（数组4）
元素1 元素2 元素3 元素4 元素5 ...元素10（数组5）

Set2 element11 element12 element13 element14 element15 ...element20(array1)
element11 element12 element13 element14 element15 ...element20（array2）
element11 element12 element13 element14 element15 ...element20(array3)
element11 element12 element13 element14 element15 ...element20(array4)
元素11 元素12 元素13 元素14 元素15 ...元素20（数组5）
. . .
设置N

有人可以通过 ng-repeat 帮助实现这一点，每个数组在单个集合中只有 10 个条目。

我试着写这段代码：

<table class="table table-bordered">
  <thead>
    <tr>
      <th class="info" colspan="3">Combo</th>
      <th class="info" colspan="10">Repititions</th>
    </tr>
    <tr border="1 px solid black">
      <th class="info" colspan="3">{{repitition_length.length}} Shots</th>
      <th class="info">1</th>
      <th class="info">2</th>
      <th class="info">3</th>
      <th class="info">4</th>
      <th class="info">5</th>
      <th class="info">6</th>
      <th class="info">7</th>
      <th class="info">8</th>
      <th class="info">9</th>
      <th class="info">10</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="3">Set {{i+1}}</td>
      <td>
        <tr ng-repeat="i in array" ng-init="index = i*10">
          <td ng-repeat="one in color_with_mushin.slice(index,index+10)" bgcolor={{one.color}}>{{one.value}}</td>
        </tr>
        <tr ng-repeat="i in array" ng-init="index = i*10">
          <td ng-repeat="one in color_with_quite_eye_percentage.slice(index,index+10)" bgcolor={{one.color}}>
            {{one.value}}
          </td>
        </tr>
        <tr ng-repeat="i in array" ng-init="index = i*10">
          <td ng-repeat="one in color_with_quite_eye_counter.slice(index,index+10)" bgcolor={{one.color}}>
            {{one.value}}
          </td>
        </tr>
        <tr ng-repeat="i in array" ng-init="index = i*10">
          <td ng-repeat="one in color_with_rep_score.slice(index,index+10)" bgcolor={{one.color}}>{{one.value}}</td>
        </tr>
        <tr ng-repeat="i in array" ng-init="index = i*10">
          <td ng-repeat="one in color_with_grand_total.slice(index,index+10)" bgcolor={{one.color}}>{{one.value}}</td>
        </tr>
      </td>
    </tr>
  </tbody>
</table>

在控制器中我定义了 $scode.index 和 $scope.array:

$scope.index = 0;
$scope.array = [];
for(var i=0; i<$scope.color_with_mushin.length/10;i++)                                                           
{
  $scope.array.push(i);
}

我得到的输出是：

我想要的是第一行，每个数组有十个条目，然后在第二行，接下来是所有数组的十个条目，依此类推。

【问题讨论】：

到目前为止你尝试过什么？你能发布你的角度代码来看看出了什么问题吗？
@rrd 我已经编辑了这个问题，你能建议我长时间卡住的代码有什么问题吗。
您的表格代码需要一些工作，因为您在中有一个，但是当我有机会时会仔细查看。

标签： angularjs html-table

【解决方案1】：

由于您使用的是切片，我假设您的数据存储在一些连续的数组中。

我更喜欢直接使用数据对象，所以我会采用这种方法。

$scope.sets = [];

$scope.color_with_mushin.forEach(function(item, i) {
    var set = Math.floor(i/10);

    if (!$scope.sets[set]) {
        $scope.sets[set] = new Array(5);
    }

    item.type = "color_with_mushin";
    $scope.sets[set][0].push(item);
});

// repeat for each data array, or you can refactor the code and make use of a predefined source array like

var sources = ["color_with_mushin", "color_with_quite_eye_percentage", ...]

<div ng-repeat="set in sets">
    <div>Set {{$index + 1}}</div>
    <table>
        <tr ng-repeat="row in set">
            <td ng-repeat="data in row" bgcolor={{data.color}}>{{data.value}}</td>
        </tr>
    </table>
</div>

【讨论】：