Rakesh Lochan Sarma Rakesh Lochan Sarma - 3 months ago 100
AngularJS Question

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

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

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>