ng table v1.0.0: TypeError: Impossible de lire la propriété 'page' undefined

Je tente d'utiliser AngularJS ng table de l'exemple: http://4dev.tech/2015/08/tutorial-basic-datatable-sorting-filtering-and-pagination-with-angularjs-and-ng-table/ng table v1.0.0: TypeError: Impossible de lire la propriété 'page' undefined

angular.module('ngTableTutorial', ['ngTable']) 
 
     .controller('tableController', function ($scope, $filter, NgTableParams) { 
 
    
 
      $scope.users = [{"id":1,"first_name":"Philip","last_name":"Kim","email":"[email protected]","country":"Indonesia","ip_address":"29.107.35.8"}, 
 
         {"id":2,"first_name":"Judith","last_name":"Austin","email":"[email protected]","country":"China","ip_address":"173.65.94.30"}, 
 
         {"id":3,"first_name":"Julie","last_name":"Wells","email":"[email protected]","country":"Finland","ip_address":"9.100.80.145"}, 
 
         {"id":4,"first_name":"Gloria","last_name":"Greene","email":"[email protected]","country":"Indonesia","ip_address":"69.115.85.157"}, 
 
         {"id":50,"first_name":"Andrea","last_name":"Greene","email":"[email protected]","country":"Russia","ip_address":"128.72.13.52"}]; 
 
$scope.usersTable = new NgTableParams({ 
 
       page: 1, 
 
       count: 10 
 
      }, { 
 
       total: $scope.users.length, 
 
       getData: function ($defer, params) { 
 
        $scope.data = $scope.users.slice((params.page() - 1) * params.count(), params.page() * params.count()); 
 
        $defer.resolve($scope.data); 
 
       } 
 
      }); 
 
      });

<!DOCTYPE html> 
 
<html ng-app="ngTableTutorial"> 
 
    <head> 
 
     <title>TODO supply a title</title> 
 
     <meta charset="UTF-8"> 
 
\t  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
\t \t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
     <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script> 
 
     <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" media="screen"> 
 
     <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js" type="text/javascript"></script> 
 
     <link rel="stylesheet" href="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.css"> 
 
     <script src="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.js"></script> 
 
     <!-- <link href="app/resources/css/style.css" rel="stylesheet" type="text/css"/> 
 
\t  <script src="app/resources/js/app.js" type="text/javascript"></script>--> 
 
\t  
 
    </head> 
 
    <body> 
 
     <div ng-controller="tableController"> 
 
<table ng-table="usersTable" class="table table-striped"> 
 
    <tr ng-repeat="user in data"> 
 
     <td data-title="'Id'" > 
 
      {{user.id}} 
 
     </td> 
 
     <td data-title="'First Name'" > 
 
      {{user.first_name}} 
 
     </td> 
 
     <td data-title="'Last Name'" > 
 
      {{user.last_name}} 
 
     </td>  
 
     <td data-title="'e-mail'" > 
 
      {{user.email}} 
 
     </td>  
 
     <td data-title="'Country'"> 
 
      {{user.country}} 
 
     </td>  
 
     <td data-title="'IP'" > 
 
      {{user.ip_address}} 
 
     </td>  
 
    </tr> 
 
</table> 
 
     </div> 
 
    </body> 
 
</html>

Et faire exception: TypeError: Impossible de lire la propriété 'page' de undefined

Je pense, parce que ng-table va à la nouvelle version 1.0.0. Et maintenant, cet exemple ne fonctionne pas. Et je ne peux pas comprendre comment réécrire l'exemple, de sorte qu'il fonctionne avec la nouvelle version ng-table?

Aidez-moi s'il vous plaît. UPD: Ou pouvez-vous juste poster un exemple autonome, avec ng-table 1.0.0, getdata, pagination et filtration? UPD: Si delete $ defer de getData params n'est pas utile. Il ne s'agit pas d'une exception, mais pas de données. Snippet montrent le problème:

UPD 16/08/2016 01:15 ajouter la ligne $ scope.data = $ scope.users.slice ((params.page() - 1) * params.count(), params.page() * params.count());

et maintenant les données montrent, mais pas de filtrage. Comment réécrire l'extrait de données de filtrage?

UPD 16/08/2016 01:36: string Ajouter

counts: [2, 4, 6, 10, 20],

<tr ng-repeat="user in $data track by user.id">

Et maintenant, la pagination et le filtrage est bon.

\t angular.module('ngTableTutorial', ['ngTable']) 
 
     .controller('tableController', function($scope, $filter, NgTableParams) { 
 

 
    \t   $scope.users = [ 
 
    \t    { "id": 1, "first_name": "Philip", "last_name": "Kim", "email": "[email protected]", "country": "Indonesia", "ip_address": "29.107.35.8" }, 
 
    \t    { "id": 2, "first_name": "Judith", "last_name": "Austin", "email": "[email protected]", "country": "China", "ip_address": "173.65.94.30" }, 
 
    \t    { "id": 3, "first_name": "Julie", "last_name": "Wells", "email": "[email protected]", "country": "Finland", "ip_address": "9.100.80.145" }, 
 
    \t    { "id": 4, "first_name": "Gloria", "last_name": "Greene", "email": "[email protected]", "country": "Indonesia", "ip_address": "69.115.85.157" }, 
 
    \t    { "id": 50, "first_name": "Andrea", "last_name": "Greene", "email": "[email protected]", "country": "Russia", "ip_address": "128.72.13.52" } 
 
    \t   ]; 
 
    \t   $scope.usersTable = new NgTableParams({ 
 
    \t    page: 1, 
 
    \t    count: 2 
 
    \t   }, { 
 
    \t    total: $scope.users.length, 
 
\t     counts: [2, 4, 6, 10, 20], 
 
    \t    getData: function(params) { 
 
    \t     params.total($scope.users.length); 
 
\t     $scope.data = $scope.users.slice((params.page() - 1) * params.count(), params.page() * params.count());  \t     
 
\t     return $scope.data; 
 
    
 
\t     } 
 
    \t   }); 
 
    \t  })

<html ng-app="ngTableTutorial"> 
 
    <head> 
 
     <title>TODO supply a title</title> 
 
     <meta charset="UTF-8"> 
 
\t  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
\t \t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
     <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script> 
 
     <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" media="screen"> 
 
     <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js" type="text/javascript"></script> 
 
     <link rel="stylesheet" href="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.css"> 
 
     <script src="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.js"></script> \t  
 
    </head> 
 
    <body> 
 
     <div ng-controller="tableController"> 
 
<table ng-table="usersTable" class="table table-striped"> 
 
    <tr ng-repeat="user in $data track by user.id"> 
 
     <td data-title="'Id'" > 
 
      {{user.id}} 
 
     </td> 
 
     <td data-title="'First Name'" > 
 
      {{user.first_name}} 
 
     </td> 
 
     <td data-title="'Last Name'" > 
 
      {{user.last_name}} 
 
     </td>  
 
     <td data-title="'e-mail'" > 
 
      {{user.email}} 
 
     </td>  
 
     <td data-title="'Country'"> 
 
      {{user.country}} 
 
     </td>  
 
     <td data-title="'IP'" > 
 
      {{user.ip_address}} 
 
     </td>  
 
    </tr> 
 
</table> 
 
     </div> 
 
    </body> 
 
</html>

Source

2016-08-15 katerinkadar

Avez-vous regardé http://ng-table.com/#/loading/demo-external-array? On dirait que 'getData' prend' param' comme argument unique. –

@ just.ru Je fais getData paramètres simples, mais cela n'aide pas. Il ne s'agit pas d'une exception, mais pas de données. Snippet montre le problème: – katerinkadar

Il y a eu quelques changements de rupture 0.8.x à la version 1.0.0 qui sont documentées dans le fichier CHANGELOG du dépôt github ici: https://github.com/esvit/ng-table/blob/master/CHANGELOG.md#breaking-changes

Comme @Just. ru déjà souligné, votre problème est probablement causé par un changement dans la signature getData. Dans les versions antérieures, le premier paramètre était $defer, un objet deferred tel que connu du service $q. Cela a permis de faire des appels asynchrones et de signaler que de nouvelles données sont arrivées. Avec la version 1.0.0, l'API a changé de telle sorte que vous pouvez désormais renvoyer des données directement ou renvoyer une promesse pour vos données. La ng-table s'occupe ensuite de tout pour vous.

Donc, si vos données sont déjà disponibles et que vous ne souhaitez pas utiliser le filtrage côté serveur et le tri, vous pouvez utiliser la nouvelle propriété dataset comme ceci:

$scope.users = [ /* your data... */ ];

pris.

$scope.usersTable = new NgTableParams({ 
    // your config 
    }, { 
    dataset: $scope.users; 
    } 
);

Ou vous pouvez gérer le filtrage sur votre propre en mettant en œuvre la méthode getData en conséquence:

$scope.usersTable = new NgTableParams({ 
    // your config 
    }, { 
    getData: function(params) { 
     params.total($scope.users.length); 
     return $scope.users.slice((params.page() - 1) * params.count(), params.page() * params.count()); 
    } 
    } 
);

Si votre serveur prend en charge le filtrage et la pagination, alors vous devez définir certaines propriétés en fonction de la réponse. La réponse doit contenir des informations sur le nombre total d'éléments correspondant à la requête.

En supposant que votre réponse JSON ressemble à ceci:

{ 
    totalAmountOfMatchingItems: 33, 
    itemsOfTheCurrentPage: [ 
    { /*... */ } 
    ] 
}

vous pouvez avoir besoin de mettre en œuvre votre getData en conséquence:

$scope.usersTable = new NgTableParams({ 
    // your config 
    }, { 
    getData: function(params) { 
     return $scope.backendApi.queryForResult(params).then(function(data) { 
     params.total(data.totalAmountOfMatchingItems); 
     return data.itemsOfTheCurrentPage; 
     }); 
    } 
    } 
);

Il est important d'appeler la méthode params.total() pour que le tableau ng-sait il doit rendre la pagination. MISE À JOUR: Lorsque vous utilisez la version getData, vous devez également vous assurer de référencer la valeur correcte pour les éléments filtrés lors de leur itération. Auparavant, vous avez affecté les éléments filtrés à $scope.data. Ceci est maintenant également géré par ng-table, qui utilise la propriété $data. Donc, pour corriger votre extrait, vous devez également adapter le ng-repeat en conséquence:

<tr ng-repeat="user in $data track by user.id">

Source

2016-08-15 21:36:16

Je suis désolé, mais pouvez-vous réécrire mon extrait? Parce que maintenant l'erreur a disparu, mais les données ne s'affichent pas. Afficher un extrait de UPD. – katerinkadar

S'il vous plaît voir la mise à jour. Vous devez également adapter le modèle pour lire la propriété correcte '$ data'. –

merci beaucoup :) – katerinkadar

ng table v1.0.0: TypeError: Impossible de lire la propriété 'page' undefined

Répondre

Questions connexes