javascript - NG表更改页面在第二次点击(不是第一次点击)上的操作

在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后，用数据填充

最佳答案

如上述Mohebifar和Wards的评论所述，您无需在此使用角度超时服务。不过，$ defer参数是从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>

关于javascript - NG表更改页面在第二次点击(不是第一次点击)上的操作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27372326/