Отображение данных БД в пользовательском интерфейсе с использованием angularjs определенным образом

Question

У меня проблема с отображением таблицы БД.

Мои данные сейчас в этом формате.

 Name          Age      Sex  

 Jack      |   20    |   Male 
 Jill      |   22    |   Male 
 Annie     |   19    |   Female 
 Stephanie |   17    |   Female

Я могу получить вышеуказанные данные в $ scope.data Angularjs для этого вида JSON.

[{"Name":"Jack","Age":20,"Sex":"Male"},{"Name":"Jill","Age":22,"Sex":"Male"},{"Name":"Annie","Age":19,"Sex":"Female"},{"Name":"Stephanie","Age":17,"Sex":"Female"}]

Я хочу отобразить это в пользовательском интерфейсе, используя Angularjs вэтот формат

          Male
  Jack      |     20
  Jill      |     22

         Female
  Annie     |     19
  Stephanie |     17

Answer 1

angular.module('app', []).controller('ctrl', function($scope) {  
  $scope.data = [
    { Name: 'Jack', Age: 20, Sex: 'Male' },   
    { Name: 'Jill', Age: 22, Sex: 'Male' }, 
    { Name: 'Annie', Age: 19, Sex: 'Female' }, 
    { Name: 'Stephanie', Age: 17, Sex: 'Female'}
  ];
  $scope.sexes = $scope.data.map(function(x) { return x.Sex; })
    .filter(function(value, index, self) { return self.indexOf(value) === index; });
})

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}
table{
  width:150px;
}
td{
  width:50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>

<div ng-app='app' ng-controller='ctrl'>
  <table ng-repeat='sex in sexes'>
    <thead>
      <tr>
        <th colspan=2>{{sex}}</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat='item in data | filter : {Sex : sex} : true'>
        <td>{{item.Name}}</td>
        <td>{{item.Age}}</td>
      </tr>
    </tbody>
  </table>
</div>