html 角度表 - 类似枢轴的显示答案

【问题标题】：html angular table - pivot-like displayhtml 角度表 - 类似枢轴的显示
【发布时间】：2018-03-02 18:01:58
【问题描述】：

谁能帮我弄清楚如何在 html/angular/bootstrap 中完成以下操作？

我有如下数据：

在我的页面上，我想这样显示：

【问题讨论】：

如何将源数据转换为您需要的方式（旋转它）然后在网格中显示？
我已经使用pivottable.js 做到了这一点。当然为了把它变成角度，你应该用指令包装它
@G_S 我也想过这个问题。但是，您将如何处理绑定它？我考虑将对象数组转换为数组数组，然后翻转行和列。但是，在那之后我被卡住了！
@lealceldeiro 感谢您修复我的帖子。没有足够的信誉在这里显示图片...

标签： javascript html angularjs angular-ui-bootstrap

【解决方案1】：

如果您使用的是 angularjs，这就是您需要做的：

控制器中的代码

$scope.data = [ { OrderDate: "1/15/2018", Quantity: 10, Price: "$ 50" },
                { OrderDate: "1/16/2018", Quantity: 20, Price: "$ 100" },
                { OrderDate: "1/17/2018", Quantity: 30, Price: "$ 150" }
              ];

html页面上的代码：

<table class="table table-striped">
 <tbody>
     <tr data-ng-repeat="(key, val) in data[0]">
         <th>
             {{ key }}
         </th>
         <td data-ng-repeat="row in data">
             {{ row[key] }}
         </td>
     </tr>
 </tbody>
</table>

输出会是这样的

这是为每 10 行添加填充的代码：

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  
  <script data-require="angular.js@1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  <script>
    (function() {
      var app = angular.module("myApp", []);
      app.controller('testCtrl', function($scope) {
        
          $scope.data = [
            {column_1: "1,1",column_2: "1,2",column_3: "1,3",column_4: "1,4",column_5: "1,5",column_6: "1,6",column_7: "1,7",column_8: "1,8",column_9: "1,9",column_10: "1,10",column_11: "1,11",column_12: "1,12",column_13: "1,13",column_14: "1,14",column_15: "1,15",column_16: "1,16",column_17: "1,17",column_18: "1,18",column_19: "1,19",column_20: "1,20",column_21: "1,21",column_22: "1,22",column_23: "1,23",column_24: "1,24",column_25: "1,25",column_26: "1,26",column_27: "1,27",column_28: "1,28",column_29: "1,29",column_30: "1,30"},
            {column_1: "2,1",column_2: "2,2",column_3: "2,3",column_4: "2,4",column_5: "2,5",column_6: "2,6",column_7: "2,7",column_8: "2,8",column_9: "2,9",column_10: "2,10",column_11: "2,11",column_12: "2,12",column_13: "2,13",column_14: "2,14",column_15: "2,15",column_16: "2,16",column_17: "2,17",column_18: "2,18",column_19: "2,19",column_20: "2,20",column_21: "2,21",column_22: "2,22",column_23: "2,23",column_24: "2,24",column_25: "2,25",column_26: "2,26",column_27: "2,27",column_28: "2,28",column_29: "2,29",column_30: "2,30"}];
          });
      }());
  </script>
  <style>
    table tr:nth-of-type(10n) td{
        padding-bottom: 50px;
    }
    
    table td, table th{
      border: 1px solid #ffffff !important;
    }
  </style>
</head>

<body ng-controller="testCtrl">
  <table class="table">
    <tbody>
      <tr data-ng-repeat="(key, val) in data[0]" class="test">
        <th>
          {{ key }}
        </th>
        <td data-ng-repeat="row in data">
          {{ row[key] }}
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

【讨论】：

谢谢！这有点工作。唯一的问题是格式化很棘手。我还需要在两者之间插入空行。我的实际表有 30 多列（所以 30 行），用户希望结果行由空行分隔（例如，第 1-10 行，然后是空行，第 11-25 行，然后是空行，然后是其余的）。跨度>
表格之间的空间可以通过css轻松处理