javascript - 通过水平分组在表中显示数据

Question

我有一些具有以下格式的数据:

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

我想在这样的表格中显示:

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

我尝试做的是在 Controller 中像这样对我的数据进行分组:

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

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

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

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

编辑 我的困难在于你通过一行一行地创建一个表，所以我的 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>

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

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>