AngularJS: table with ng-repeat on columns and rows

Issue

I am trying to build a table with angularJS ng-repeat with double entry points. Here is an example:

         Column A   Column B    Column C
Object 1    X                      Y
Object 2               P    
Object 3                           N

In the table above, "Object 1" has 2 sub-objects: X and Y that belong to the columns A and C respectively.

I need to be able to match the rows content to the column heading. I am not sure what what JSON structure do I need or how to use ng-repeat properly to do this ?

Solution

I would consider a third-party library, such as ngTable to handle logic like this. The Open Source Community has generally thought of great solutions for problems like this.

Your example:

controller.js

angular.module('yourmodule', ["ngTable"])
       .controller('exampleController', ($scope, $service, NgTableParams) => {

    // Get a JSON object from your backend of choice
    $service.getObjects().then(rows => {
        $scope.table_data = new NgTableParams({}, {dataset: rows})
    })
})

template.html

<div ng-controller="exampleController">
    <table ng-table="table_data">
        <tr ng-repeat="row in $data">
            <td title="ColA"></td>
            <td title="ColB"></td>
            <td title="ColC"></td>
        </tr>
    </table>
</div>

Answered By - Kris Molinari