I'm working on creating a table using column names and records stored in arrays 'headers' and 'records'.
<table class="table table-striped" id="dataset">
<thead>
<tr>
<th>#</th>
<th ng-repeat="header in headers">{{ header }}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="record in records.slice(1,11)">
<td>{{$index + 1}}</td>
<td ng-repeat="cell in record">{{cell}}</td>
</tr>
</tbody>
</table>
Initially, both the records are set to null and they get updated once the user selects a csv file to read. After assigning values to the arrays inside the controller like this -
$scope.headers = headers;
$scope.records = records;
However, I notice that the elements are not generated in the view. In the browser console under elements, the ng-repeat directive is shown as commented out.
<table class="table table-striped" id="dataset">
<thead>
<tr>
<th>#</th>
<!-- ngRepeat: header in headers -->
</tr>
</thead>
<tbody>
<!-- ngRepeat: record in records.slice(1,11) -->
</tbody>
</table>
I am trying to figure out what mistake I might be making.
Here's the script snippet for better understanding:
var VizApp = angular.module('VizApp', []);
VizApp.config(function($routeProvider){
$routeProvider
.when('/overview',{
controller : 'VizController',
templateUrl : 'views/overview.html'
})
.when('/options', {
controller : 'VizController',
templateUrl : 'views/options.html'
})
.when('/charts', {
controller : 'VizController',
templateUrl : 'views/charts.html'
})
.otherwise({redirectTo : '/overview'})
});
var controllers = {};
controllers.VizController = function($scope){
var headers = [];
var records = [];
var csvPath;
var cgiPath = '/cgi-bin/cgiTest.py';
$scope.getCsv = function(selection){
// This function triggers when a user selects a csv file
csvPath = 'csvs/' + selection[0].files[0].name;
$.ajax({
type: "GET",
url: csvPath,
dataType: "text",
success: function(data) {
processData(data);
}
});
};
function processData(allText) {
var allTextLines = allText.split(/\r\n|\n/);
headers = allTextLines[0].split(',');
$.each(allTextLines.slice(1,allTextLines.length), function(i,thisRecord){
records[i] = thisRecord.split(',');
});
console.log("Processing completed");
$scope.headers = headers;
$scope.records = records;
// At this point, even if I do $scope.headers = ['a','b'], I still don't see two columns with headers a and b
}
// If I assign $scope.headers = ['a','b'] here, then I can see two columns with headers a and b
};
VizApp.controller(controllers);
</script>
Any guidance would be greatly appreciated.