Отображение данных в таблице, группируя их по горизонтали

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

Вы можете попробовать это:

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/

Answer 2

Если это ваша основная структура:

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>