Ng-Table不与NgTableParams绑定服务器端数据

Question

无法将表与从服务中收集的数据绑定。

控制器代码如下：

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 = [];

//在同一个控制器中加载插座类型

 $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(' ');
        });
    };

//使用同一控制器中的选项绑定OutletType

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

    };

和HTML查看代码如下：

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

但无法绑定数据，但我尝试将其与静态数据绑定，它正常工作。

Answer 1

这里$ scope.LoadOutletTypes是一个异步方法调用，它将使用结果异步填充$ scope.outletTypes。在LoadOutletTypes方法调用之后的其余代码将不等待结果而是继续执行，这将使用null值填充initialSettings对象中的数据集（如果它无法及时加载插座类型。但这将适用于静态数据） 。

试试下面的代码..

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