Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Params undefined in ng-table's getData function

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.

like image 391
Edward Swing Avatar asked Aug 23 '16 16:08

Edward Swing


2 Answers

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);
        });
    }
like image 177
Jesse Amano Avatar answered Nov 15 '22 04:11

Jesse Amano


I also ran into this issue, when I updated my ng-table. Your code should work in versions before 1.0.0 release. 1.0.0-beta.9 is the last version supporting your code.

In the 1.0.0 change notes it says:

getData signature change

The $defer paramater supplied to your getData method has been removed. Instead your getData method should return an array or a promise that resolves to an array.

To migrate

Previously:

var tp = new NgTableParams({}, { getData: getData });

function getData($defer, params){
    // snip
    $defer.resolve(yourDataArray);
}

Now:

var tp = new NgTableParams({}, { getData: getData });

function getData(params){
    // snip
    return yourDataArrayOrPromise;
}
like image 43
Firze Avatar answered Nov 15 '22 05:11

Firze