Question

我尝试使用ng-repeat创建矩阵表。我通过使用pivot PIVOT以我希望它的方式获取sql查询输出，并且现在在Sql服务器上显示

+-------------+----+----+---+---+---+---+-----+---+---+-----+---+-----+---+-----+---+
| displayname | a  | b  | c | d | e | f | g h | i | j | k l | m | n o | p | r s | t |
+-------------+----+----+---+---+---+---+-----+---+---+-----+---+-----+---+-----+---+
| row1        |  2 |  0 | 0 | 0 | 1 | 0 |   1 | 0 | 0 |   0 | 1 |   0 | 0 |   0 | 0 |
| row2        |  1 |  0 | 0 | 0 | 0 | 0 |   0 | 0 | 0 |   0 | 0 |   0 | 0 |   1 | 0 |
| row3        | 57 | 28 | 3 | 6 | 6 | 4 |   3 | 0 | 0 |   1 | 1 |   1 | 1 |   2 | 1 |
| row4        |  5 |  4 | 2 | 1 | 0 | 0 |   0 | 0 | 1 |   2 | 0 |   0 | 0 |   0 | 1 |
| row5        |  0 |  2 | 5 | 2 | 0 | 0 |   1 | 1 | 0 |   0 | 0 |   1 | 0 |   0 | 0 |
+-------------+----+----+---+---+---+---+-----+---+---+-----+---+-----+---+-----+---+

我试图用html，datatables和angular js复制这个输出，但是我被卡住了。

首先，我不知道如何使第一列（row1，... 5）保持不变，其次我不知道在查询中旋转表是否是正确的方法。

我尝试对每个<td>的{{1}}进行重新编码，并对剩余的<tr>元素使用ng-repeat，但它不起作用。另外，如何在项目[0] .a？

中找到ng-repeat内项目的索引

Answer 1

您可以尝试以下代码和plunker示例附加

<强> JS

＆＃13;

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.dataSet = [{
    'col1': '1',
    'col2': '2',
    'col3': '3',
    'col4': '4',
    'col5': '5'
  }, {
    'col1': 'a1',
    'col2': 'a2',
    'col3': 'a3',
    'col4': 'a4',
    'col5': 'a5'
  }];
  $scope.cols = Object.keys($scope.dataSet[0]);
  console.log($scope.cols);
  $scope.name = 'World';
});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.0.x" src="https://code.angularjs.org/1.0.8/angular.js" data-semver="1.0.8"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <table class="table">
    <tr>
      <th>Display Name</th>
      <th ng-repeat="key in cols">{{key}}</th>
    </tr>
    <tr ng-repeat="data in dataSet">
      <td>Row {{$index+1}}</td>
      <td>{{data.col1}}</td>
      <td>{{data.col2}}</td>
      <td>{{data.col3}}</td>
      <td>{{data.col4}}</td>
      <td>{{data.col5}}</td>

    </tr>
  </table>
</body>


</html>

＆＃13;

通过ng-repeat创建矩阵报告

1 个答案: