javascriptangularjsdatatablestabular

AngularJS: table with ng-repeat on columns and rows


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>