Question

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

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

z == 'b'

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"]
    ]
  ];
});

或者还有一个plunkr here我还在玩。

Answer 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>

使用Ng-Repeat指令创建具有3D阵列的表

1 个答案: