NG-表V1.0.0：类型错误：无法读取的不确定

我试图用angularjs NG-表从示例属性 '页'： http://4dev.tech/2015/08/tutorial-basic-datatable-sorting-filtering-and-pagination-with-angularjs-and-ng-table/NG-表V1.0.0：类型错误：无法读取的不确定

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>

并获得例外： TypeError：无法读取属性'页'的undefined

我认为，它是因为ng-table转到新版本1.0.0。而现在，这个例子不起作用。而我无法弄清楚如何重写这个例子，以便它可以与新版本ng-table一起使用？

请帮助我。

UPD：或者你可以发布独立的例子，用ng-table 1.0.0，getdata，分页和过滤吗？

UPD：如果从getData参数中删除$ defer参数没有帮助。它不排除异常，但不显示数据。片段显示问题：

UPD 2016年8月16日1:15 我添加一行 $ scope.data = $ scope.users.slice（（params.page（） - 1）* params.count（） params.page（）* params.count（））;

现在数据显示，但没有过滤。如何将片段重写为过滤数据？

UPD 2016年8月16日1:36：添加字符串

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

和

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

现在寻呼和过滤性好。

\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>

来源

2016-08-15 katerinkadar

你看着http://ng-table.com/#/loading/demo-external-array？看起来'getData'将'param'作为单个参数。 –

@ just.ru我让getData单参数，但这不帮助。它不排除异常，但不显示数据。摘录显示问题： – katerinkadar

有从0.8.4到1.0.0版本的一些重大的变动被在CHANGELOG文件在这里GitHub的仓库中记载：https://github.com/esvit/ng-table/blob/master/CHANGELOG.md#breaking-changes

由于@just。 ru已经指出，你的问题可能是由于getData签名的变化造成的。在较早的版本中，第一个参数是$defer，$q服务中已知的一些deferred对象。这允许进行异步调用并发信号通知新数据已经到达。在1.0.0版本中，API已经发生了变化，您现在可以直接返回数据或返回数据承诺。 ng-table然后处理你的一切。

所以，如果您的数据已经可用，并且您不想使用服务器端过滤和排序，您可以使用新的dataset属性是这样的：

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

假设。

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

或者您也可以通过相应实施getData方法处理你自己的过滤：

$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()); 
    } 
    } 
);

如果您的服务器支持的筛选和分页，那么你必须根据响应设置一些属性。响应必须包含有关查询匹配的元素总量的信息。

假设你的JSON响应如下所示：

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

您可以根据需要实现你的getData相应：

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

调用params.total()方法，以便NG表知道如何是很重要的它必须呈现分页。

更新：当您使用getData版本时，还需要确保在迭代过滤项目时引用正确的值。之前，您将已过滤的项目分配到$scope.data。这现在也由ng-table处理，它使用$data属性。因此，要解决您的片断，你还需要将ng-repeat相应调整：

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

来源

2016-08-15 21:36:16

对不起，但您可以重写我的摘录吗？因为现在错误消失了，但数据不显示。查看来自UPD的片段。 – katerinkadar

请参阅更新。您还需要调整模板以从正确的属性'$ data'读取。 –

非常感谢你:) – katerinkadar

NG-表V1.0.0：类型错误：无法读取的不确定

回答

相关问题