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方法調用後的其餘代碼將不會等待結果，而是繼續執行，這將用initial值填充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">....