angular-table
angular-table copied to clipboard
Incompatible with angular 1.6.4
Integration with angular-1.6.4 give the following error.
Here is the HTML,
<table class="table table-striped" at-table at-paginated at-list="serverList" at-config="config">
<thead></thead>
<tbody>
<tr>
<td at-implicit at-sortable at-attribute="id" width="150" at-initial-sorting="asc"></td>
<td at-implicit at-sortable at-attribute="alias" width="250"></td>
<td at-implicit at-sortable at-attribute="host"></td>
</tr>
</tbody>
</table>
<at-pagination at-list="serverList" at-config="config"></at-pagination>
And, here is the JS,
WebServices._get(ConstantService.GET_ALL_SERVER).then(function(value) {
$scope.serverList = value.data;
console.log($scope.serverList);
$scope.config = {
itemsPerPage: 2,
fillLastPage: true
}
$timeout(function() {
$scope.$apply();
});
}, function(reason) {
console.log(reason);
}, function(value) {
console.log(value);
});
This is the error and due to this the pagination is not working.
angular-1.6.4.js:14525 TypeError: Cannot read property 'length' of undefined
at update (angular-table-1.0.7.js:354)
at angular-table-1.0.7.js:377
at Scope.$digest (angular-1.6.4.js:17999)
at Scope.$apply (angular-1.6.4.js:18269)
at done (angular-1.6.4.js:12387)
at completeRequest (angular-1.6.4.js:12613)
at XMLHttpRequest.requestLoaded (angular-1.6.4.js:12541)
Kindly address this issue. Thanks in advance.
I am getting this error as well, but the pagination works, but my dev console shows the error highlighted above ;(
@sanjibpramanick You need to declare $scope.serverList as an empty array before the http request
$scope.serverList = []; WebServices._get(ConstantService.GET_ALL_SERVER).then(function(value) { $scope.serverList = value.data; console.log($scope.serverList); $scope.config = { itemsPerPage: 2, fillLastPage: true } $timeout(function() { $scope.$apply(); }); }, function(reason) { console.log(reason); }, function(value) { console.log(value); });
For what it's worth I've also gotten around this issue by hiding the table until the data is available. Declaring the empty list on the scope wasn't working for me, but ensuring the table was not visible works ok. And I ended up hiding these views anyway since I didn't want empty content visible during the load process.
I have the same issue using angular 1.6.4. @ridespirals would you mind to post an example of you workaround?
So let's say you have a property on scope called data
that will be holding the list angular-table
is binding to (and it's loaded asynchronously from an API or something). In the view, just have something like this:
<div ng-if="!data">Loading...</div>
<div ng-if="data">
<!-- the rest of the view including the table -->
<table at-table at-list="data"...>
<!-- etc... -->
</table>
</div>
And for a real example, i literally just copied this from a real page from a project at work:
<div class="row text-center">
<loading-dots ng-if="!analytics.data" size="xl"></loading-dots>
</div>
<div class="row" ng-if="analytics.data">
<tabs>
<pane title="Projects Overview">
<div class="row">
<div class="col-full">
<table class="stripe hover"
at-table
at-paginated
at-list="analytics.data.projectList"
at-config="projectsConfig">
<!-- ... etc... -->
Hope that helps. I am using angular 1.6.6 btw.
@ridespirals Great - thank you for the fast reply. The errors are gone now! But unfortunately there was one tiny typo which was causing all the trouble. It seems the error messages had nothing todo with it. Anyway - thank you very much.
can you post an example of your HTML with the at-table
binding? maybe I can help if I see it.
Sorry - my post was a bit missleading. I already found the typo and everything is now working as expected.
great! good to hear. isn't it always something like that lol. I wasted a good 15 minutes last week because I typed list
instead of at-list
, so I can sympathize.