Ng-Table tableParams

Question

I have am following the first example of ng-table (http://bazalt-cms.com/ng-table/example/1).

Everything seems to work except tableParams. As soon as I include it in the controller nothing is display in the page.

The difference between the example and my code is that I load data from a json service:

angular.module('mean.cars').controller('CarsController', ['$scope', '$stateParams', '$location', 'Global', 'Cars',
function ($scope, $stateParams, $location, Global, Cars, ngTableParams) {
    $scope.global = Global;
    var data = Cars.query();

$scope.tableParams = new ngTableParams({
    page: 1,            // show first page
    count: 10           // count per page
}, {
    total: data.length, // length of data
    getData: function($defer, params) {
        $defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
    }
});

Cars.query(); is working well (tested it). So what am I missing? There is a javascript error: "undefined is not a function occuring" at the following line:

$scope.tableParams = new ngTableParams({

Barbarous

I think this this tutorial will help you, it explains exactly what you are trying to do : 4dev.tech/index.php/2015/08/16/… – Nyctaginaceous

Answer 1

I'm also new with Angular and also with ngTable plugin, but I think your problem is that you are not adding the reference for ngTable on your module.

angular.module('mean.cars', ['ngTable'])
       .controller('CarsController', ['$scope', 
                                      '$stateParams', 
                                      '$location', 
                                      'Global', 
                                      'Cars', 
                                      'ngTableParams', 
            function ($scope, $stateParams, $location, Global, Cars, ngTableParams) { ...

You missed the 'ngTable' on the module dependency, and also the 'ngTableParams' on your controller.

Hope this helps you.

Dissident

Answer 2

I'm not sure where ngTableParams comes from, but you're not injecting it:

['$scope', '$stateParams', '$location', 'Global', 'Cars',
function ($scope, $stateParams, $location, Global, Cars, ngTableParams) {

Either that should be like this:

['$scope', '$stateParams', '$location', 'Global', 'Cars', 'ngTableParams',
function ($scope, $stateParams, $location, Global, Cars, ngTableParams) {

Or like this:

['$scope', '$stateParams', '$location', 'Global', 'Cars',
function ($scope, $stateParams, $location, Global, Cars) {    

Shipment

I did try both solutions but nothing. With the first one I get a jshint error: 'ngTableParams is not defined' – Barbarous

the first version worked for me, this is listing all field names as strings also .. – Priestly

Answer 3

Try this, Replace your ngTableParams -> NgTableParams angular.module('mean.cars').controller('CarsController', ['$scope', '$stateParams', '$location', 'Global', 'Cars', function ($scope, $stateParams, $location, Global, Cars, NgTableParams) {

and

$scope.tableParams = new NgTableParams({ .It worked for me.

Pastime

Answer 4

run your service in getData

$scope.tableParams = new ngTableParams({
    page: 1,            // show first page
    count: 10           // count per page
}, {
    total: data.length, // length of data
    getData: function($defer, params) {
        data = Cars.query();
        $defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
    }
});

Cervelat

please explain to the OP why – Middleweight