angular-table icon indicating copy to clipboard operation
angular-table copied to clipboard

Incompatible with angular 1.6.4

Open sanjibpramanick opened this issue 7 years ago • 9 comments

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.

sanjibpramanick avatar Jun 22 '17 10:06 sanjibpramanick

I am getting this error as well, but the pagination works, but my dev console shows the error highlighted above ;(

siddrc avatar Jul 26 '17 20:07 siddrc

@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); });

le-pepe avatar Sep 06 '17 20:09 le-pepe

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.

ridespirals avatar Oct 31 '17 22:10 ridespirals

I have the same issue using angular 1.6.4. @ridespirals would you mind to post an example of you workaround?

mat1010 avatar Nov 05 '17 02:11 mat1010

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 avatar Nov 05 '17 03:11 ridespirals

@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.

mat1010 avatar Nov 05 '17 03:11 mat1010

can you post an example of your HTML with the at-table binding? maybe I can help if I see it.

ridespirals avatar Nov 05 '17 03:11 ridespirals

Sorry - my post was a bit missleading. I already found the typo and everything is now working as expected.

mat1010 avatar Nov 05 '17 03:11 mat1010

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.

ridespirals avatar Nov 05 '17 04:11 ridespirals