AngularJS ng-repeat-start ng-repeat-end with table and rowspan

Question

I am facing issue while making a dynamic table with dynamic rowspan. My json is a array of objects. And the element objects are also arrays. The element arrays should come as the no of dynamic rowspan. I have a json like:

{
  "roleTypes": [
    {
      "roleType": {
        "name": "SOA Role"
      },
      "rates": [
        {
          "rateType": {
            "name": "new Rate"
          },
          "hourlyRate": {
            "value": 1222
          },
          "internalRate": {
            "value": 433
          }
        },
        {
          "rateType": {
            "name": "myRate"
          },
          "hourlyRate": {
            "value": 1350
          },
          "internalRate": {
            "value": 1650
          }
        }
      ]
    },
    {
      "roleType": {
        "name": "SOA Role"
      },
      "rates": [
        {
          "rateType": {
            "name": "new Rate"
          },
          "hourlyRate": {
            "value": 1222
          },
          "internalRate": {
            "value": 433
          }
        },
        {
          "rateType": {
            "name": "myRate"
          },
          "hourlyRate": {
            "value": 1350
          },
          "internalRate": {
            "value": 1650
          }
        }
      ]
    },
    {
      "roleType": {
        "name": "AngularJs Developer"
      }
    }
  ]
}

if I want to use ng-repeat-start and ng-repeat-end and make a table structure like below:

roleType------      | rateType-----hourlyRate--------internalRate
---------------------------------------------------------------------------
                    | new Rate      1222                433
                    ---------------------------------------------------
SOA Role            | myRate        1350                1650
---------------------------------------------------------------------------
                    | new Rate      1222                 433
                    ---------------------------------------------------
AngularJs Developer |myRate         1350                 1650
---------------------------------------------------------------------------

I am struggling to get the dynamic rowspan. Please check if anyone can help.

Answer 1

What Pankaj mentioned is correct but I think you need a more dynamic table on rowspan. You can do like as the following example:

var app = angular.module("sa", []);

app.controller("FooController", function($scope) {

  $scope.data = {
    "roleTypes": [{
      "roleType": {
        "name": "SOA Role"
      },
      "rates": [{
        "rateType": {
          "name": "new Rate"
        },
        "hourlyRate": {
          "value": 1222
        },
        "internalRate": {
          "value": 433
        }
      }, {
        "rateType": {
          "name": "myRate"
        },
        "hourlyRate": {
          "value": 1350
        },
        "internalRate": {
          "value": 1650
        }
      }]
    }, {
      "roleType": {
        "name": "AngularJs Developer"
      },
      "rates": [{
        "rateType": {
          "name": "new Rate"
        },
        "hourlyRate": {
          "value": 123
        },
        "internalRate": {
          "value": 1431
        }
      }, {
        "rateType": {
          "name": "myRate"
        },
        "hourlyRate": {
          "value": 443
        },
        "internalRate": {
          "value": 1930
        }
      }, {
        "rateType": {
          "name": "otherRate"
        },
        "hourlyRate": {
          "value": 343
        },
        "internalRate": {
          "value": 2000
        }
      }]
    }]
  };
});

td[rowspan] {
  vertical-align: middle !important;
}

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">


<div ng-app="sa" ng-controller="FooController">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>roleType</th>
        <th>rateType</th>
        <th>hourlyRate</th>
        <th>internalRate</th>
      </tr>
    </thead>

    <tbody>
      <tr ng-repeat-start="role in data.roleTypes">
        <td rowspan="{{role.rates.length}}">{{role.roleType.name}}</td>
        <!-- Display the first rate in the same "tr" -->
        <td>{{role.rates[0].rateType.name}}</td>
        <td>{{role.rates[0].hourlyRate.value}}</td>
        <td>{{role.rates[0].internalRate.value}}</td>
      </tr>
      
      <!-- Now display the other rates in different "tr" excluding first -->
      <!-- You can also make a subarray from here excluding the 1st rate -->
      <tr ng-repeat="rate in role.rates" ng-if="!$first" ng-repeat-end>
        <td>
          {{rate.rateType.name}}
        </td>
        <td>
          {{rate.hourlyRate.value}}
        </td>
        <td>
          {{rate.internalRate.value}}
        </td>
      </tr>
    </tbody>
  </table>
</div>

Answer 2

You could do something like below by having ng-repeat over tbody

<table>
  <tbody ng-repeat="role in roleTypes.roleTypes">
    <tr ng-repeat="rate in role.rates">
      <td ng-if="$first" rowspan="2">{{role.roleType.name}}</td>
      <td>{{rate.rateType.name}}</td>
      <td>{{rate.hourlyRate.value}}</td>
      <td>{{rate.internalRate.value}}</td>
      <tr>
  </tbody>
</table>

Plunkr