Ng-Table is not binding from NgTableParams with server side data

Question

Unable to bind the table with data i.e. collected from service.

Controller code is as:

app.controller('outletTypeController', ['$scope', '$location', '$timeout', 'outletTypesService', '$uibModal', 'NgTableParams', '$q', '$log',
function ($scope, $location, $timeout, outletTypesService, $uibModal, NgTableParams, $q, $log) {
    $scope.message = "";
    $scope.animationsEnabled = true;
    $scope.outletTypes = [];

//To Load Outlet Types in same controller

 $scope.LoadOutletTypes = function () {

        outletTypesService.getOutletTypes().then(function (results) {

            $scope.outletTypes = results.data.Result;

        }, function (error) {

            var errors = [];
            if (response.data != null) {
                for (var key in response.data.modelState) {
                    for (var i = 0; i < response.data.modelState[key].length; i++) {
                        errors.push(response.data.modelState[key][i]);
                    }
                }
            }

            $scope.message = "Failed to load data due to:" + errors.join(' ');
        });
    };

//To Bind OutletType With Options in same controller

$scope.outletTypeWithOptions = function () {

        //to set outletTypes
        $scope.LoadOutletTypes();

        var initialParams = {
            count: 2 // initial page size
        };
        var initialSettings = {
            // page size buttons (right set of buttons in demo)
            counts: [10, 50, 100],
            // determines the pager buttons (left set of buttons in demo)

            paginationMaxBlocks: 5,
            paginationMinBlocks: 1,
            dataset: $scope.outletTypes
        };

        return new NgTableParams(initialParams, initialSettings);

    };

and HTML View Code is as:

<div id="body" ng-controller="outletTypeController">
 <table ng-table="outletTypeWithOptions" class="table table-striped" show-filter="true" cellspacing="0" width="100%">
                <tr data-ng-repeat="type in $data">
                    <td title="'Logo'" class="text-center">
                        <div class="logoImg">
                            <img src="images/halalpalc.png" width="30" />
                        </div>
                    </td>
                    <td title="'Outlet Type'" filter="{ OTypeName: 'text'}" sortable="'OTypeName'">
                        {{ type.OTypeName }}
                    </td>
                    <td title="'Icon Rated'">I R</td>
                    <td title="'Icon Unrated'">I U</td>
                    <td title="'Status'" class="text-center status">
                        <a href="#" class="btn-xs btn-danger">{{ type.IsActive}}</a>
                    </td>
                    <td title="'Action'" class="text-center">
                        <!--<a href="#" class="editAction" data-toggle="modal" data-target="#myModal" title="Edit">
                            <img src="images/SVG_icons/edit_action.svg" />
                        </a>-->
                        <button data-ng-click="open()" class="btn btn-warning">Edit</button>
                        <!--<a href="#" class="closedAction"><img src="images/SVG_icons/close_action.svg" /></a>-->
                    </td>
                </tr>
            </table>
</div>

But unable to bind the data, However I try to bind it with Static Data it's properly working.

Answer 1

Here $scope.LoadOutletTypes is an async method call, which will asynchronously populate $scope.outletTypes with results. Rest of the code after LoadOutletTypes method call won't wait for result instead proceeds for execution, which will populate dataset in initialSettings object with null value(If it was unable to load the outlet types in time. But this will work for static data).

Try the below code..

$scope.LoadOutletTypes = function () {

    outletTypesService.getOutletTypes().then(function (results) {

        $scope.outletTypes = results.data.Result;
        $scope.setOutletTypeWithOptions();

    }, function (error) {

        var errors = [];
        if (response.data != null) {
            for (var key in response.data.modelState) {
                for (var i = 0; i < response.data.modelState[key].length; i++) {
                    errors.push(response.data.modelState[key][i]);
                }
            }
        }

        $scope.message = "Failed to load data due to:" + errors.join(' ');
    });
};

$scope.setOutletTypeWithOptions = function () {

    var initialParams = {
        count: 2 // initial page size
    };
    var initialSettings = {
        // page size buttons (right set of buttons in demo)
        counts: [10, 50, 100],
        // determines the pager buttons (left set of buttons in demo)

        paginationMaxBlocks: 5,
        paginationMinBlocks: 1,
        dataset: $scope.outletTypes
    };

    $scope.NgTableParams = new NgTableParams(initialParams, initialSettings);

};
<div id="body" ng-controller="outletTypeController">
  <table ng-table="NgTableParams" ng-init="LoadOutletTypes()" class="table table-striped" show-filter="true" cellspacing="0" width="100%">
            <tr data-ng-repeat="type in $data">....