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/

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

2 个答案: