Question

我为控制器实现了这个代码

＆＃13;

.controller('tableCtrl', function($scope, $filter, $sce, ngTableParams, tableListUser) {
        var data = [];
        tableListUser.getAll()
        .then(function(data) {
            console.log("THEN DATA : ", data);
            $scope.data = data;
        });
        data = $scope.data;
        console.log("DATA : ", data);

        // Full Params Sort, Filter, Edit
        this.tableFull = new ngTableParams({
            page: 1,            // show first page
            count: 10,          // count per page
            sorting: {
                name: 'asc'     // initial sorting
            }
        }, {
            total: data.length, // length of data
            getData: function ($defer, params) {
                console.log("Data tableFull :", $scope.data);
                // use build-in angular filter
                var orderedData = params.sorting() ? $filter('orderBy')($scope.data, params.orderBy()) : $scope.data;

                orderedData = params.filter() ? $filter('filter')(orderedData, params.filter()) : orderedData;

                orderedData = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());

                
                console.log(orderedData.length);
                params.total(data.length); // set total for recalc pagination
                $defer.resolve(orderedData);

            }
        })
}

＆＃13;

这是服务

＆＃13;

.service('tableListUser', function($http, SessionService, AccessLevels) {
        return {
            getAll: function() {
                console.log('Service tableListUser');
                var token = SessionService.get('token');
                console.log(token);
                $http.defaults.headers.common.Authorization = 'Bearer ' + token;
                var url = 'http://api-ec.local/users';
                var promise = $http.get(url);
                return promise.then(function(result) {
                    console.log("RESULT : ", result);
                    return result.data.data;
                });
            }
        };
    })

＆＃13;

我在这里评论了许多帖子：asynchronously populating an AngularJS ngTable with json data

但我无法使用var data中的数据，因为它是Undefined。承诺的响应是好的，并获得应用程序期望的数据，因为当我在tableListUser.getAll().then中记录数据时，它很好。我使用$socope.data传递数据并在ngTableParams中使用数据的方式是否存在问题。这阻止了我很多。

提前感谢您的帮助。

Answer 1

我猜你没有使用controllerAs语法。如果是这样的话，只需将this.tableFull更改为$ scope.tableFull即可。您的代码与我的旧应用程序几乎相同，我执行此操作并且这是唯一的区别不是特定于域的。

Answer 2

好吧，试验回来并受到@mikefeltman评论的启发我在控制器中做了这个更新，现在，对我来说，一切都运行良好。

新控制器：

.controller('tableCtrl', function($scope, $filter, $sce, ngTableParams, tableListUser) {
        var data = [];
        tableListUser.getAll()
        .then(function(data) {
            console.log("THEN DATA : ", data);
            // $scope.data = data;
            var data = data;
            // $apply();
            // Full Params Sort, Filter, Edit
            $scope.tableFull = new ngTableParams({
                page: 1,            // show first page
                count: 10,          // count per page
                sorting: {
                    name: 'asc'     // initial sorting
                }
            }, {
                total: data.length, // length of data
                getData: function ($defer, params) {
                    console.log("Data tableFull :", data);
                    // use build-in angular filter
                    var orderedData = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : data;

                    orderedData = params.filter() ? $filter('filter')(orderedData, params.filter()) : orderedData;

                    orderedData = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());

                   
                    params.total(data.length); // set total for recalc pagination
                    $defer.resolve(orderedData);

                }
            })
        });
})

在视图中，我已经对此进行了修改

<div class="card-body" data-ng-controller="tableCtrl as tctrl">
    <div class="table-responsive">
        <table ng-table="tctrl.tableFull" class="table table-striped table-vmiddle" show-filter="true">

到此

<div class="card-body" ng-controller="tableCtrl">
    <div class="table-responsive">
        <table ng-table="tableFull" class="table table-striped table-vmiddle" show-filter="true">

正如我所说，经过不同实验的斗争后，这种方法对我来说很有用，我希望它可以帮助别人。如果有最好的方法，请告诉我:)）

如何在承诺响应后使用ngTableParams数据 - Angular

2 个答案: