Question

在html视图中

   <table ng-table="tableParams1" class="table table-striped table-bordered table-hover table-condensed  ">
        <tr ng-repeat="user in $data">
            <td data-title="'id'">{{user.id}}</td>
            <td data-title="'name'">{{user.name}}</td>
            <td data-title="'studentKey'">{{user.studentKey}}</td>
        </tr>
    </table>

在js代码中

  $timeout($scope.tableParams1 = new ngTableParams({
                page: 1,
                count: 5,
            }, {
                getData: function ($defer, params) {
                    var page = params.page() - 1;
                    var paramsCount = params.count();
                    breezeCommon.getByPaging(manager, "Student", "id asc", page, paramsCount)
                        .then(function(res) {
                            params.total(res.inlineCount);
                            $defer.resolve(res.results);
                        })
                        .catch(function(res) {
                            debugger
                        });
                },
            }),1000);

首次点击后我正确获取数据，但它没有附加到ng-table，并且在第二次点击ng-table填充数据后

Answer 1

正如Mohebifar和Wards上面的评论中所述，您不需要在此使用角度超时服务。 $ defer param虽然是从ngTable指令本身传递给“getdata”回调的东西（实际上是由ngTable创建的$ q.defer（）结果）。然后延迟对象传递给您的回调，您决定何时解决或拒绝它。如果您解决它，您必须传递通过服务或本地阵列获得的数据。

无论如何，这是一个使用github api作为测试服务的工作示例。

var app = angular.module('main', ['ngTable']);

app.controller('MainCtrl', function($scope, $http, ngTableParams) {
  $scope.tableParams = new ngTableParams({
                page: 1,
                count: 5,
            }, {
                getData: function ($defer, params) {
                    var page = params.page();
                    var size = params.count();
                    var testUrl = 'https://api.github.com/search/repositories';
                    var search = {
                      q: 'angular',
                      page: page,
                      per_page: size
                    }
                    $http.get(testUrl, { params: search, headers: { 'Content-Type': 'application/json'} })
                         .then(function(res) {
                            params.total(res.data.total_count);
                            $defer.resolve(res.data.items);
                        }, function(reason) {
                            $defer.reject();
                        }
                    );
                },
            });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.3.3/ng-table.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.3.3/ng-table.min.js"></script>
<div  ng-app="main"  ng-controller="MainCtrl">
   <table ng-table="tableParams" class="table table-striped table-bordered table-hover table-condensed">
        <tr ng-repeat="repo in $data">
            <td data-title="'id'">{{repo.id}}</td>
            <td data-title="'name'">{{repo.name}}</td>
            <td data-title="'owner'">{{repo.owner.login}}</td>
        </tr>
</table> 
<div>

第二次点击时的Ng表更改页面操作（不是第一次）

1 个答案: