Utilizing a bootstrap table with ng-repeat to populate data, yet encountering issues updating and displaying the table.
A custom directive has been created for drag and drop functionality in AngularJS. When a file is dragged and dropped, the information is successfully retrieved in the controller.
The issue lies in updating the table dynamically with the file details obtained.
$scope.getFiles = function(res)
{
$scope.fileList = res;
console.log(res);
}
Within the HTML:
<file-drop fetch-files="getFiles"></file-drop>
The 'getFiles' function is called in the controller and returns the value. Despite seeing an object in the console through 'console.log' during drag and drop actions.
However, when assigning the data:
$scope.fileList = res;
In the HTML:
<table class="table table-condensed" >
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Size</th>
<th>Last Modified</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="file in fileList">
<td>{{file.name}}</td>
<td>{{file.type}}</td>
<td>{{file.size}}</td>
<td>{{file.lastModified}}</td>
</tr>
</tbody>
</table>
Using ng-repeat in HTML does not display anything as expected. The values are pushed into an array within the directive, maintaining previous drop info until the browser is refreshed.
How can the table be updated in real-time? The object structure includes:
[{name: "Topic_modelling.xlsx", type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", size: 39274, lastModified: Mon Aug 03 2015 13:40:53 GMT+0530 (IST)}]