JSFiddle - React, Tailwind, and code Playground

by suraj mahajan

HTML

<div ng-app="MyApp">
    <div ng-controller="MyController">
        <table>
            <thead>
                <tr>
                    <td>ID</td>
                    <td>Subjects</td>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat-start="user in users">
                    <td rowspan="{{user.subjects.length+1}}">{{user.id}}</td>                    
                </tr>
                <tr ng-repeat-end ng-repeat="subject in user.subjects">
                    <td>S{{subject.id}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

CSS

table { border-collapse: collapse; }
td { border: 1px solid Black; }

JavaScript

var app = angular.module('MyApp', []);
app.controller('MyController', function ($scope) {

    var users = [{
        id: 1,
        subjects: [{
            id: 1,
            name: "eng"
        }, {
            id: 2,
            name: "phy"
        }]
    }, {
        id: 2,
        subjects: [{
            id: 1,
            name: "eng"
        }, {
            id: 3,
            name: "math"        
        }, {
            id: 4,
            name: "hist"
        }, {
            id: 5,
            name: "geog"
        }]
    }];

    $scope.users = users;
});