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

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/