通过水平分组来显示表格中的数据

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

我试图做的是将我的数据像这样在控制器中分组：

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

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/