Angular table with td.rowspan V2

by klode

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<table ng-app="myApp" ng-controller="MainCtrl">
  <tr>
    <td>Contitent</td>
    <td>Country</td>
    <td>Capital</td>
  </tr>
  <tr ng-repeat-start="(continent, countries) in response">
    <td rowspan="{{countries.length}}">{{continent}}</td>
    <td>{{countries[0].country}}</td>
    <td>{{countries[0].capital}}</td>
  </tr>
  <tr ng-repeat-end ng-repeat="value in countries.slice(1)">
    <td>{{value.country}}</td>
    <td>{{value.capital}}</td>
  </tr>
</table>

CSS

table {
  border: 1px solid #666;
  width: 100%;
}

td {
  border: 1px solid #666;
}

th {
  background: #f8f8f8;
  font-weight: bold;
  padding: 2px;
}

JavaScript

var mockData;

angular.module('myApp', [])
  .controller("MainCtrl", MainCtrl);

function MainCtrl($scope, $http) {

  $scope.response = {};
  $scope.vm = {};
  loadData();

  function loadData() {
    var httpRequest = $http({
      method: 'POST',
      url: '/echo/json/',
      data: mockData

    }).success(function(data, status) {
      $scope.response = data;
    });

  };

}

mockData = "json=" + encodeURI(JSON.stringify({
  "Africa": [{
    "country": "Nigeria",
    "capital": "Abuja"
  }, {
    "country": "Kenya",
    "capital": "Nairobi"
  }, {
    "country": "Ghana",
    "capital": "Accra"
  }],
  "Asia": [{
    "country": "India",
    "capital": "New Delhi"
  }, {
    "country": "China",
    "capital": "Beijing"
  }],
  "Europe": [{
    "country": "France",
    "capital": "Paris"
  }]
}));