I have a data-driven application that updates table headers dynamically based on user clicks. The data is loaded from a JSON File.
When using a normal table with ng-repeat="heading in gridHeaders">{{ heading }}, everything works fine. However, when I switch to ui-grid and the view is updated with new data, the grid cells become empty while the column headers remain static. How can I update the column definition in ui-grid?
Here is the link to the JSFiddle http://jsfiddle.net/masoom/svcxh6hu/7/
controllers.js
$scope.gridOptions = {
data: 'grid',
columnDefs : '' /* not sure how to use the <ng-repeat="heading in gridHeaders"> {{ heading}} here*/
};
/*
Watch for the change in the Tree's current node.
When user clicks on a node, $scope.currentNode will update
*/
$scope.$watch(function () {
return $scope.currentNode;
}, function () {
$scope.displayGrid(angular.fromJson($scope.currentNode.json));
});
/*
Sets the Grid's data model. The view will update when this is called.
*/
$scope.displayGrid = function (data) {
$scope.grid = data;
$scope.gridHeaders = new Array();
if (typeof data != 'undefined') {
for (var key in data[0]) {
$scope.gridHeaders.push(key);
}
}
}
index.html
<table ui-grid="{ data: grid }" class="grid1" ng-show="gridHeaders.length>0" >
<thead>
<tr>
<th ng-repeat="heading in gridHeaders">{{ heading }}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="obj in grid">
<td ng-repeat="heading in gridHeaders">{{ obj[heading] }}</td>
</tr>
</tbody>
</table>
<div ui-grid="gridOptions" class="grid1" ng-show="gridHeaders.length>0" >
</div>