Params undefined in ng-table's getData function

Edward Swing picture Edward Swing · Aug 23, 2016 · Viewed 8.3k times · Source

I am running into a problem using ng-table where the params that should be passed into my getData function is undefined. I an new to AngularJS and ng-table, so any help would be appreciated. I have verified that the REST calls in the code below work by directly invoking them, so the problem is somewhere in my angular code/configuration.

Anyhow, here is a pseudo-example of my controller. The actual code is on an intranet, so I can't paste it directly, so pardon any typos from transcription. Using ng-table 1.0.0 and angular 1.5.8:

myApp.controller('myCtrl', ['$scope', '$http', 'NgTableParams',
    function($scope, $http, NgTableParams) {
    $http.get('services/data/count').success(function(data) {
        // this works fine
        $scope.totalRows = data.rowCount;
    });
    $scope.tableParams = new NgTableParams({
        page: 1
        count: 20
    }, {
        total: $scope.totalRows,
        getData: function($defer, params) {
            // this line fails with params being undefined
            $http.get('/services/data/' + params.page() + '/' + params.count()) {
            .success(function(data) {
                $scope.data = data;
                $defer.resolve(data);
            });
        }
    });
}]);

And here is the relevant piece of html:

<table ng-table="tableParams" class="table table-condensed table-striped">
    <tr ng-repeat="row in data">
        // row stuff here
    </tr>
</table>

I've inserted console.log statements before the getData http call, and params is printing out as undefined.

Answer

Jesse Amano picture Jesse Amano · Aug 25, 2016

Sorry, didn't realize my comment would be confusing. Here's your answer:

The function you put in the getData key is assumed (by the NgTable API) to take just one argument, which represents params. Put another way, the first argument to your getData function always contains params values, even though you named it $defer. And the second argument is always undefined (the API calls it with only a single argument, after all) even though you named it params.

If you want access to $defer (and it seems that you do), I think you should inject it into your controller (add '$defer' to your dependency array at the top, and then add $defer to the argument list of your controller function in the same position.)

It would look like this:

myApp.controller('myCtrl', ['$scope', '$http', '$defer', 'NgTableParams',
    function($scope, $http, $defer, NgTableParams) {
    $http.get('services/data/count').success(function(data) {
        $scope.totalRows = data.rowCount;
    });
    // ...
    getData: function(params) {
        $http.get('/services/data/' + params.page() + '/' + params.count()) {
        .success(function(data) {
            $scope.data = data;
            $defer.resolve(data);
        });
    }