javascript – html角度表 – 类似枢轴的显示

2023年4月8日 228次阅读

有人可以帮我弄清楚如何在html / angular / bootstrap中完成以下操作吗？

我有以下数据：

《javascript – html角度表 – 类似枢轴的显示》

在我的页面上,我想以这种方式显示它：

《javascript – html角度表 – 类似枢轴的显示》

最佳答案 如果您正在使用angularjs,那么您需要做的是：

Code in controller

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

Code on html page:

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

输出将是这样的

《javascript – html角度表 – 类似枢轴的显示》

这是为每第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>
点赞