使用 Ng-Repeat 指令创建带有 3D 数组的 Table

Question

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

我已经尝试过，但没有什么是精确的，但即使我可以在下面的代码片段中用二维数组做类似的事情。

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我还在玩

Answer 1

在问了问题但没有得到 'displaying the data on 3D arrays using ng-repeat directive' 的答案后，我很快找到了下面的解决方案。

首先我发现下面的代码块显示了 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>

使用 Ng-Repeat 指令创建带有 3D 数组的 Table

Creating a Table with 3D Arrays with Ng-Repeat Directive

javascript

multidimensional-array

angularjs

angularjs-ng-repeat