通过水平分组在 table 中显示数据

Question

我有一些数据具有以下格式：

[name:'Name1', speed:'Val1', color:'Val2']
[name:'Name2', speed:'Val4', color:'Val5']
[name:'Name3', speed:'Val6', color:'Val7']

我想像这样在 table 中显示：

       |Name1|Name2|Name3|
       ______|_____|______
speed |Val1 |Val4 |Val6
color |Val2 |Val5 |Val7

我尝试做的是在控制器中像这样对我的数据进行分组：

$scope.data = {
    speeds: [{
      ...
    },{
      ...
    },{
      ...
    }],
    colors: [{
      ...
    },{
      ...
    },{
      ...
    }],
  };

但我不确定在空白区域中放什么，因为那里的所有值都代表所有名称（帐户）的 'val1' 变量的值，而我的测试直到现在一直失败。

您可以将其想象成某种比较矩阵，用于查看不同账户中同一变量的所有值。

如何在我的模型中表示数据，以便我能够按照说明在 table 中成功显示它们？

编辑我的困难在于你通过逐行创建一个 table，所以我的 html 看起来像这样：

  <table md-data-table class="md-primary" md-progress="deferred">
    <thead>
      <tr>
        <th ng-repeat="header in headers">                
          {{header.value}}              
        </th>
      </tr>
    </thead>
    <tbody>
      <tr md-auto-select ng-repeat="field in data">                
        <td ng-repeat="var in field">{{var.value}}</td>               
      </tr>
    </tbody>
  </table>

正如您所见，我对每一行都有一个循环，对每一行的每个值都有一个循环。如果我想水平显示数据，但我想要垂直显示数据，这会更容易。因此，如果我们谈论汽车，我们会将汽车型号设为 headers，并在每一行中显示它们各自的特征（速度、颜色等）。

Answer 1

如果这是你的基本结构：

var cols = [{name:'Name1', val1:'Val1', val2:'Val2'},
            {name:'Name2', val1:'Val4', val2:'Val5'},
            {name:'Name3', val1:'Val6', val2:'Val7'}];

此代码

$scope.table = cols.reduce(function(rows, col) {
    rows.headers.push({ value: col.name });
    rows.data[0].push({ value: col.speed });
    rows.data[1].push({ value: col.color });
    return rows;
}, {headers:[], data:[[], []]});

将为您提供 $scope.table 的结构：

$scope.table = {
    headers : [{
            value : "Name1"
        }, {
            value : "Name2"
        }, {
            value : "Name3"
        }
    ],
    data : [
        [{
                value : 'val1'
            }, {
                value : 'val4'
            }, {
                value : 'val6'
            }
        ],
        [{
                value : 'val2'
            }, {
                value : 'val5'
            }, {
                value : 'val17'
            }
        ]
    ]
};

  <table md-data-table class="md-primary" md-progress="deferred">
    <thead>
      <tr>
        <th ng-repeat="header in table.headers">                
          {{header.value}}              
        </th>
      </tr>
    </thead>
    <tbody>
      <tr md-auto-select ng-repeat="field in table.data">                
        <td ng-repeat="var in field">{{var.value}}</td>               
      </tr>
    </tbody>
  </table>

Answer 2

你可以试试这个：

HTML

<table ng-app="myTable" ng-controller="myTableCtrl">
    <thead>
        <tr>
            <th ng-repeat="car in cars">{{car.name}}</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td ng-repeat="car in cars">{{car.speed}}</td>
        </tr>
        <tr>
            <td ng-repeat="car in cars">{{car.color}}</td>
        </tr>
    </tbody>

</table>

JS

angular.module("myTable",[])
.controller("myTableCtrl", function($scope) {
    $scope.cars = [
    {
        name:'Name1', 
        speed:'Val1', 
        color:'Val2'
    },
    {
        name:'Name2', 
        speed:'Val4', 
        color:'Val5'
    },
    {
        name:'Name3', 
        speed:'Val6', 
        color:'Val7'
    }
]
});

https://jsfiddle.net/ABr/ms91jezr/

通过水平分组在 table 中显示数据

Display data in a table by grouping them horizontally

javascript

angularjs

angular-material