使用 Ng-Repeat 指令创建具有 3D 数组的表答案

【问题标题】：Creating a Table with 3D Arrays with Ng-Repeat Directive使用 Ng-Repeat 指令创建具有 3D 数组的表
【发布时间】：2018-07-28 14:48:58
【问题描述】：

我有一个表格来显示其中的数据，如下图所示。我能想象到的最好的方法是创建一个 3D 数组来用 ng-repeat 显示它，因此没有像我这样的问题来显示它，这样我就可以认为它是不可能的。

我已经尝试过，但没有任何精确的结果，即使我可以在下面的 sn-p 中使用 2D 数组做类似的事情。

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
  $scope.grid = [
    [
      ["June"],
      ["July"],
      ["August"],
      ["September"]
    ],
    [
      ["0,1"],
      ["1,1"],
      ["4,5"],
      ["2,1"]
    ]
    [
      ["3,2"],
      ["1,0"],
      ["6,3"],
      ["2,9"]
    ]
  ];
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>

<body ng-app="plunker">
  <div ng-controller="MainCtrl">
    <table>
      <thead>
        <tr>
          <td></td>
          <th class="text-center" colspan="3">Install</th>
          <th class="text-center" colspan="3">Uninstall</th>
        </tr>
        <tr>
          <td></td>
          <th>AppName1</th>
          <th>AppName2</th>
          <th>TOTAL</th>
          <th>AppName1</th>
          <th>AppName2</th>
          <th>TOTAL</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="y in grid">
          <td ng-repeat="x in y">{{x}}</td>
          <td ng-repeat="x in y">{{x[0]}}</td>
        </tr>
      </tbody>

    </table>
  </div>
</body>

或者我还在玩plunkr here。

【问题讨论】：

标签： javascript angularjs multidimensional-array angularjs-ng-repeat

【解决方案1】：

在提出问题并没有得到“使用 ng-repeat 指令在 3D 数组上显示数据”的答案后，我很快找到了以下解决方案。

首先我发现下面的代码块显示了 3D 数组的第一个元素，

<tbody ng-repeat="y in grid">
    <tr ng-repeat="x in y">
      <td>{{x[0]}}</td>

然后我配置了我的数组以适应下面的新情况，仅此而已；

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
  $scope.grid = [
    [
      ["June", "0", "1", "1", "3", "2", "5"],
      ["July", "1", "1", "2", "1", "0", "1"],
      ["August", "4", "5", "9", "6", "3", "9"],
      ["September", "2", "1", "3", "2", "9", "11"]
    ]
  ];
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>

<body ng-app="plunker">
  <div ng-controller="MainCtrl">
    <table>
      <thead>
        <tr>
          <td></td>
          <th class="text-center" colspan="3">Install</th>
          <th class="text-center" colspan="3">Uninstall</th>
        </tr>
        <tr>
          <td></td>
          <th>AppName1</th>
          <th>AppName2</th>
          <th>TOTAL</th>
          <th>AppName1</th>
          <th>AppName2</th>
          <th>TOTAL</th>
        </tr>
      </thead>
      <tbody ng-repeat="y in grid">
        <tr ng-repeat="x in y">
          <td ng-repeat="z in x">{{z}}</td>
        </tr>
      </tbody>

    </table>
  </div>
</body>

【讨论】：