Mpondomise Mpondomise - 29 days ago 16
AngularJS Question

angularjs how to ng-repeat array values as column headings

How to ng-repeat the values of the below array as the column headings for my ng-table?


I am trying to display the value from

$scope.cols
array as the column headings of my table, in other words as the fields, and display all the rows.


enter image description here

here is my try:

<div ng-controller="mycontroller as projects">
<table ng-table-dynamic="projects.tableParams with projects.cols"
show-filter="true" class="table table-bordered table-striped">
<tr ng-repeat="row in $data">
<td ng-repeat="col in $columns">{{::row[col.field]}}</td>
</tr>
</table>
</div>


and here is my controller:

app.controller('mycontroller', ["$scope", "$filter", "ngTableParams", "DatabaseRef", "$firebaseArray",
function ($scope, $filter, ngTableParams, DatabaseRef, $firebaseArray) {

//show all projects

var showallprojects = DatabaseRef.ref("projects").orderByKey();
$scope.allprojectslist = $firebaseArray(showallprojects);
var data = $scope.allprojectslist;
data.$loaded().then(function(data) {
console.log(data.length); // data is loaded here
$scope.cols = Object.keys(data[0]);
console.log($scope.cols);
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 7, // count per page
sorting: { country: "asc" },
filter : {
}
}, {
filterSwitch: true,
total: 0, //data.length, // length of data
getData: function ($defer, params) {
// use build-in angular filter
var filteredData = params.filter() ?
$filter('filter')($scope.allprojectslist, params.filter()) :
$scope.allprojectslist;
var orderedData = params.sorting() ?
$filter('orderBy')(filteredData, params.orderBy()) :
$scope.allprojectslist;

params.total($scope.allprojectslist.length);
// set total for recalc pagination
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
});
}]);


note:



the ngtable dynamic model is taken from here and the doc is here.

Answer

EDIT

I've probably misunderstood your question, I thought the code above wasn't a copy of st-table examples.

In your scenario, if you want to display each $scope.cols value as a heading you need to ng-repeat="col in cols" and print out your current col value {{col}}.

I'm assuming your data inside the body of the table to be an array of objects, and each object to be in the form of [col] => value.

I'm updating the code sample below.

You simply need to structure better your table.

<div ng-controller="mycontroller as projects">
  <table ng-table-dynamic="projects.tableParams with projects.cols"
       show-filter="true" class="table table-bordered table-striped">
   <thead>
    <tr>
       <th ng-repeat="col in cols">{{col}}</th>
    </tr>
   </thead>
   <tbody>
    <tr ng-repeat="row in data">
      <td ng-repeat="col in col">{{ row[col] || "empty"}}</td>
    </tr>
   </tbody>
  </table>
</div>

So basically we're cycling the $columns array once for building the heading of the table; then we cycle the $data array to get an array of objects (I suppose), and each iteration is a new row; then inside of each row we cycle the $columns array again to get the col.field we're looking for, and each iteration will be a new <td> inside our row.

Hope this helps.

Comments