AngularJS: table with ng-repeat on columns and rows

Question

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 ?

yes exactly however, in your example the columns are hard coded I was trying to build something with dynamics columns. — 0xtuytuy
– 0xtuytuy, Commented May 22, 2017 at 14:16
@George actually I have tried your way, but the order is hardcoded all the way, rows and columns, i need it to be dynamic, with an ng-if maybe ? — 0xtuytuy
– 0xtuytuy, Commented May 22, 2017 at 14:30

Kris Molinari · Accepted Answer · 2017-05-22 14:52:49Z

1

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>

edited May 22, 2017 at 14:52

answered May 22, 2017 at 14:17

Kris Molinari

4936 silver badges17 bronze badges

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

1 Comment

0xtuytuy Over a year ago

Ok, I will have a look, would you know how to do this with ngTable ?

Tanveer Ahmed S · Accepted Answer · 2023-01-13 12:45:36Z

Without any third party tools we can use a way to achieve dynamic columns and rows.

Consider I have rows collection in $scope.rows and column collection in $scope.column.

$scope.column = [{ColumnName:"Column1"},{ColumnName:"Column2"},{ColumnName:"Column3"}]

$scope.rows = [
{"Column1":"A","Column2":"One","Column3":1},
{"Column1":"B","Column2":"Two","Column3":2},
{"Column1":"C","Column2":"Three","Column3":3},
{"Column1":"D","Column2":"Four","Column3":4},
{"Column1":"E","Column2":"Five","Column3":5}]

The html to form a table using these collection would be like this,

<table>
            <thead>
                <th ng-repeat="x in column">{{x.ColumnName}}</th>
            </thead>
            <tbody>
               <tr ng-repeat="x in rows">
                    <td ng-repeat="y in column">{{x[y.ColumnName]}}</td>
                </tr>
            </tbody>
        </table>
You have to add two ng-repeat. One for <tr> and another <td>.

<!-- begin snippet: js hide: false console: true babel: false -->

table {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

table td, table th {
  border: 1px solid #ddd;
  padding: 8px;
}

table tr:nth-child(even){background-color: #f2f2f2;}

table tr:hover {background-color: #ddd;}

table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: darkslateblue;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <table>
      <thead>
          <th ng-repeat="x in column">{{x.ColumnName}}</th>
      </thead>
      <tbody>
         <tr ng-repeat="x in rows">
              <td ng-repeat="y in column">{{x[y.ColumnName]}}</td>
          </tr>
      </tbody>
  </table>
</div>

Collectives™ on Stack Overflow

AngularJS: table with ng-repeat on columns and rows

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related