3

I implemented this code for the controller

.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);

            }
        })
}

And this for the service

.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;
                });
            }
        };
    })

I review many post here like this : asynchronously populating an AngularJS ngTable with json data

But I can't use the data in the var data because it is Undefined. The response of the promise is good and get the data that the app expect because when I log the data in tableListUser.getAll().then, it its well. Is there a problem with way I use $socope.data to pass the data and use it in ngTableParams. This are blocking me alot.

Thanks in advance for your help.

Community
  • 1
  • 1
ysk8
  • 31
  • 7

2 Answers2

0

I would guess that you are not using controllerAs syntax. If that's the case, just changing this.tableFull to $scope.tableFull should do the trick. Your code is nearly identical to older app of mine where I do this and that's the only difference that's not domain specific.

Mike Feltman
  • 5,160
  • 1
  • 17
  • 38
  • I did that before @mikefeltman but the same behaviour, and that, I think it is not related to the issue I did post. The question is, why the `$scope.data` is not updated with the response of the Promise. – ysk8 Apr 28 '16 at 19:36
  • 1
    I have an example up and running here: http://www.redwingcenter.com/prospects.htm with the js here: http://www.redwingcenter.com/js/prospects.js. Again, it's not particularly pretty, but you might see a difference there. – Mike Feltman Apr 28 '16 at 19:41
  • Ok @mikefeltman , thank you. I posted a new answer based and inspired on your comment :), check it out below. – ysk8 Apr 29 '16 at 00:41
0

Well, experimenting back and inspired by comments of @mikefeltman I did this update in the controller and now, for me, all is working well.

New Controller:

.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);

                }
            })
        });
})

And in the View, I have made a modification, from this

<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">

To this

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

As I said, after a fight with different experiments, this approach is functions well for me, and I hope that it can help to somebody else. If there is a best approach, please let me know :)

ysk8
  • 31
  • 7