Can html tables be a solution to this ng-repeat issue?

Question

Okay so I have a pretend data set. It tries to mimic this tabular data that is in excel.

function SU(name: String, data: Array<any>) {
    this.name = name,
    this.data = data
};

function Month(month: String, year: String, goal: Number, projection: Number, actual: Number) {
    this.month = month,
    this.year = year,
    this.goal = goal,
    this.projection = projection,
    this.actual = actual,
    this.remaining = function () { return this.goal - this.actual }
};

$scope.Recruitment.ServiceUnits = [
    new SU("SU101",
        [
            new Month("April", "2014", 1, 2, 0),
            new Month("May", "2014", 2, 2, 0),
            new Month("June", "2014", 3, 2, 0),
            new Month("July", "2014", 4, 2, 0),
            new Month("August", "2014", 5, 2, 0),
            new Month("September", "2014", 6, 2, 0),
            new Month("October", "2014", 7, 2, 0),
            new Month("November", "2014", 8, 2, 0),
            new Month("December", "2014", 9, 2, 0),
            new Month("January", "2015", 10, 2, 0),
            new Month("February", "2015", 11, 2, 0),
            new Month("March", "2015", 12, 2, 0),
            new Month("April", "2015", 13, 2, 0),
            new Month("May", "2015", 14, 2, 0),
            new Month("June", "2015", 15, 2, 0),
            new Month("July", "2015", 16, 2, 0),
            new Month("August", "2015", 17, 2, 0),
            new Month("September", "2015", 18, 2, 0)
        ]),
    new SU("SU102",
        [
            new Month("April", "2014", 1, 2, 0),
            new Month("May", "2014", 2, 2, 0),
            new Month("June", "2014", 3, 2, 0),
            new Month("July", "2014", 4, 2, 0),
            new Month("August", "2014", 5, 2, 0),
            new Month("September", "2014", 6, 2, 0),
            new Month("October", "2014", 7, 2, 0),
            new Month("November", "2014", 8, 2, 0),
            new Month("December", "2014", 9, 2, 0),
            new Month("January", "2015", 10, 2, 0),
            new Month("February", "2015", 11, 2, 0),
            new Month("March", "2015", 12, 2, 0),
            new Month("April", "2015", 13, 2, 0),
            new Month("May", "2015", 14, 2, 0),
            new Month("June", "2015", 15, 2, 0),
            new Month("July", "2015", 16, 2, 0),
            new Month("August", "2015", 17, 2, 0),
            new Month("September", "2015", 18, 2, 0)
        ]),
    new SU("SU103",
        [
            new Month("April", "2014", 1, 2, 0),
            new Month("May", "2014", 2, 2, 0),
            new Month("June", "2014", 3, 2, 0),
            new Month("July", "2014", 4, 2, 0),
            new Month("August", "2014", 5, 2, 0),
            new Month("September", "2014", 6, 2, 0),
            new Month("October", "2014", 7, 2, 0),
            new Month("November", "2014", 8, 2, 0),
            new Month("December", "2014", 9, 2, 0),
            new Month("January", "2015", 10, 2, 0),
            new Month("February", "2015", 11, 2, 0),
            new Month("March", "2015", 12, 2, 0),
            new Month("April", "2015", 13, 2, 0),
            new Month("May", "2015", 14, 2, 0),
            new Month("June", "2015", 15, 2, 0),
            new Month("July", "2015", 16, 2, 0),
            new Month("August", "2015", 17, 2, 0),
            new Month("September", "2015", 18, 2, 0)
        ])
];

How exactly would I use ng-repeat to display this? To have the two layers of headers, and alternate the Goal, Projection, Actual & Remaining Data between the months.

    <div id="goalData">
    <table>
        <thead>
            <tr>
                <th colspan="4" ng-repeat="data in Recruitment.ServiceUnits[0].data track by $index">{{data.month | limitTo:3}}</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="su in Recruitment.ServiceUnits track by $index">

            </tr>
        </tbody>
        <tfoot>
            <tr></tr>
        </tfoot>
    </table>
</div>

I can get the first header just fine. the second row of headers I'm not sure about, because it seems like I'd need a nested ng-repeat.

As for the body, I can do each row just fine, but actually getting the table data in there in teh right spots is proving problematic.

Are tables incorrect for this, even though this is tabular data? Is there any way to restructure this so it will work right, or do I need to just start using divs or create my own angular directives?

Answer 1

Well, based on the link that CozyAzure posted, I kind of worked out a solution.

I kept the data set the same, but changed the way I approached the html, as follows.

        <table>
        <tr>
            <td>
                &nbsp;
                <table>
                    <tr>
                        <th>SU</th>
                    </tr>
                    <tr ng-repeat="su in Recruitment.ServiceUnits track by $index">
                        <td>{{su.name}}</td>
                    </tr>
                </table>
            </td>
            <td ng-repeat="month in Recruitment.ServiceUnits[0].data track by $index">
                {{month.month | limitTo: 3}}
                <table>
                    <tr>
                        <th>Goal</th>
                        <th>Proj</th>
                        <th>Actl</th>
                        <th>Rmng</th>
                    </tr>
                    <tr ng-repeat="su in Recruitment.ServiceUnits track by $index">
                        <td>{{month.goal}}</td>
                        <td>{{month.projection}}</td>
                        <td>{{month.actual}}</td>
                        <td>{{month.remaining()}}</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

That produces this sort of a result

Which of course needs to be styled.

Unfortunately I now need to implement fixed headers so the document can scroll down with the headers being fixed. I think I've reached the limit of tables here, because everything I've read said this is a nightmare to implement, especially with my current structure.

Divs might be the easier solution to execute everything. Especially when I need to start layering in more and more effects.