Question

我使用json文件将信息呈现到我的Angular ng-table中。它将json中的所有信息列为普通表，但是诸如分页，视图限制等ng-table函数不起作用。

我在控制台中收到以下错误。

TypeError：无法读取属性＆＃39; slice＆＃39;未定义的

我的代码，

var app = angular.module('app', ['ngResource', 'ngTable']);

    app.service('tableService', ['$resource', function($resource){
            this.getTableData = function(id, email, date) {
                var tableDataList = $resource("table.json");

                return tableDataList.get ({
                    id: id,
                    email: email,
                    date: date
                })
            }
    }])

    app.controller('tableCtrl', function($scope, tableService, ngTableParams) {

                //Data
                $scope.id = tableService.id;
                $scope.email = tableService.email;
                $scope.date = tableService.date;

                $scope.dtResult = tableService.getTableData(this.id, this.email, this.date);


                $scope.tableParams = new ngTableParams({
                    page: 1,            // show first page
                    count: 10           // count per page
                }, {
                    total: $scope.dtResult.length, // length of data
                    getData: function ($defer, params) {
                       $defer.resolve($scope.dtResult.slice((params.page() - 1) * params.count(), params.page() * params.count()));
                    }
                })

    });

HTML

<table ng-table="tableParams" class="table">
              <tr ng-repeat="w in dtResult.list">
                  <td data-title="'ID'">
                      {{ w.id }}
                  </td>
                  <td data-title="'Email Address'">
                      {{ w.email }}
                  </td>
                  <td data-title="'Date'">
                      {{ w.date }}
                  </td>
              </tr>
</table>

普兰克 - http://plnkr.co/edit/bdWB98cAyhWTbXg8KgGx?p=preview

请帮帮我。

Answer 1

在tableService

中更改此内容

 var tableDataList = $resource('table.json',{ }, {
        getData: {method:'GET', isArray: false}
      });

Answer 2

$scope.dtResult首先设置为来自get的{{1}}的结果：

$resource

然后：

$scope.dtResult = tableService.getTableData(...)

错误可能来自上述行。

根据the docs：＆＃34;重要的是要意识到调用$ resource对象方法会立即返回一个空引用（取决于isArray的对象或数组）。＆＃34; - 所以看起来$scope.dtResult.slice(...)最初在这里将是一个空对象（最终，一旦$scope.dtResult返回一些结果，它将被填充）。也许您只需要使用get而不是query，这样结果就是数组？

修改

在评论中查看最新的plunkr，实际错误为get。这与问题中的原始不同。 TypeError: undefined is not a function已存在，但它没有dtResult功能。这并不奇怪，因为数据（再次来自plunkr）是这样的：

slice

所以你有一个带有列表的对象，你想要在表中显示这个列表。

我认为在这种情况下，您无法真正使用$ resource提供的技巧来避免使用回调（它首先返回一个空对象/数组，然后它会在以后填充详细信息，自动更新绑定视图））。您需要直接使用{ list: [ {...}, ... ] }，正如@Akshay Dhankhar在另一个答案中所建议的那样。＆＃34;官方＆＃34; server-side list example的ng-table也非常类似于此。

所以：不要先调用$promise，而是在tableService.getTableData函数内部执行，并在结果实际返回时解析表的延迟对象：

getData

在HTML中，使用// no need for this: $scope.dtResult = tableService.getTableData(this.id, this.email, this.date); $scope.tableParams = new ngTableParams({ page: 1, // show first page count: 10 // count per page }, { getData: function ($defer, params) { tableService.getTableData($scope.id, $scope.email, $scope.date).$promise.then(function(data) { params.total(data.list.length); $defer.resolve(data.list.slice((params.page() - 1) * params.count(), params.page() * params.count())); }); } })作为列表：

$data

Answer 3

This is happening because in return from service you are getting the $promise and $promise should take time in guarantee you the data.

Look at the code i did some changes and then proceed with your other stuff.

Link to plunkar

var app = angular.module('app', ['ngResource', 'ngTable']);

app.service('tableService', ['$resource', function($resource){
    this.getTableData = function(id, email, date) {
        var tableDataList = $resource("table.json");

        return tableDataList.get ({
            id: id,
            email: email,
            date: date
        }).$promise;
    }
}])

app.controller('tableCtrl', function($scope, tableService, ngTableParams) {

    //Data
    $scope.id = tableService.id;
    $scope.email = tableService.email;
    $scope.date = tableService.date;

    tableService.getTableData(this.id, this.email, this.date).then(function(data){
      console.log(data);
      $scope.dtResult = data.list;
      $scope.tableParams = new ngTableParams({
        page: 1,            // show first page
        count: 10           // count per page
    }, {
        total: $scope.dtResult.length, // length of data
        getData: function ($defer, params) {

          $defer.resolve($scope.dtResult.slice((params.page() - 1) * params.count(), params.page() * params.count()));
        }
    });

    });



});

使用json时ng-table无法正常工作

3 个答案: