AngularJS rowspan for repeated data

Question

I have an Array which has Role and Screen variables.

Role variable can be repeated in this array.

I want to create rowspan for repeated data.

How can I do this easily?

My pseudocode is in below

Angular

$scope.testData=[
    {"Role":"Admin","Screen":"A"},
    {"Role":"Admin","Screen":"B"},
    {"Role":"Admin","Screen":"C"},
    {"Role":"Standard","Screen":"H"},
    {"Role":"Standard","Screen":"FH"},
];

HTML

 <tr ng-repeat="detail in Roles">
        <td>{{detail.Role}}</td>
        <td>{{detail.Screen}}</td>
 </tr>

I need the output in below

<table>
   <tr>
        <td rowspan="3">Admin</td>
        <td>AAA</td>
    </tr>
    <tr>
        <td>BBB</td>
    </tr>
    <tr>
        <td>CCC</td>
    </tr>
    <tr>
        <td rowspan="2">Standard</td>
        <td>DDD</td>
    </tr>
    <tr>
        <td>EEE</td>
    </tr>
</table>

can you post the hardcoded html of how you want the table output to look (i.e. without angular)? — AKMorris
– AKMorris, Commented Jun 27, 2017 at 6:19
Thanks for answers guys. @SlavaUtesinov your answer is partially correct but my data structure like testData and I want to create my output using my Array with AngularJS — Gurcan
– Gurcan, Commented Jun 27, 2017 at 6:38

Fetrarij · Accepted Answer · 2017-06-27 06:43:05Z

2

Change your object to look like (Using angular.forEach() for example)

$scope.testData = [
    {"Role":"Admin","Screen":["A", "B", "C"]},
    {"Role":"Standard","Screen": ["H", "FH"]}
];

Then it's too easy for your rowspan table:

<table>
    <tr ng-repeat-start="(key, val) in testData">
        <td rowspan="{{val.Screen.length}}">{{val.Role}}</td>
        <td>{{val.Screen[0]}}</td>
    </tr>
    <tr ng-repeat-end ng-repeat="value in val.Screen.slice(1)">
        <td>{{value}}</td>
    </tr>
</table>

answered Jun 27, 2017 at 6:43

Fetrarij

7,3463 gold badges33 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gurcan Over a year ago

Cool.. Thank you so much

Collectives™ on Stack Overflow

AngularJS rowspan for repeated data

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related