Angularjs - Ng-Tble - 未定义

Question

我在创建ngTable时遇到问题。我可以获取手动创建的数组来渲染，但是当我将它钩到我的api时，它会失败。当然没有错误，所以我很困惑为什么。我得到一个$ scope.data数组并没有像预期的那样得到填充，但新的tableParams总是以undefined结束。

这里是我的HTML

<div ng-app="myApp" class="container-fluid" ng-controller="demoController as demo"> 
    <div class="row"> 
     <div class="col-xs-12"> 
      <h2 class="page-header">Pharmacy Rebate Portal</h2> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-6"> 
      <h3>Default configuration</h3> 
      <table ng-table="demo.tableParams" class="table table-condensed table-bordered table-striped"> 
       <tr ng-repeat="row in $data"> 
        <td data-title="'Manufacturer'">{{row.manufacturer | uppercase }} </td> 

       </tr> 
      </table> 
     </div> 

    </div> 
</div> 

我使用这个版本ngTable的。随着1.6.3 Angular。有任何想法吗？

https://unpkg.com/ng-table/bundles/ng-table.min.js

$http.get('/api/rebates'). 
      then(function (response) { 
       $scope.data = response.data; 
       $scope.tableParams = new NgTableParams({ 
        page: 1,   // show first page 
        count: 10,   // count per page 
        sorting: { 
         foo: 'asc'  // initial sorting 
        } 
       }, { 
         total: $scope.data.length, // length of data 
         getData: function ($defer, params) { 
          // use build-in angular filter 
          var orderedData = params.sorting() ? 
           $filter('orderBy')($scope.data, params.orderBy()) : 
           $scope.data; 

          $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count())); 
         } 
        }); 
      });` 

Answer 1

的JavaScript总是同步的。所以这里发生了什么，$scope.data=response;在$http.get('/api/rebates')...完成之前执行。这意味着，$scope.data未定义。为了解决这个问题，我建议使用服务。

var myApp = angular.module('myApp', []); 
    myApp.controller('AppCtrl', ['$scope', '$http', function($scope, dataService){ 

    dataService.dataLists(function(response) { 
    console.log(response.data); 
    $scope.data=response.data; 
    $scope.tableParams = new NgTableParams({ 
        page: 1,   // show first page 
        count: 10,   // count per page 
        sorting: { 
         foo: 'asc'  // initial sorting 
        } 
       }, { 
         total: $scope.data.length, // length of data 
         getData: function ($defer, params) { 
          // use build-in angular filter 
          var orderedData = params.sorting() ? 
           $filter('orderBy')($scope.data, params.orderBy()) : 
           $scope.data; 

          $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count())); 
         } 
        }); 
    }); 

}); 
}]) 

myApp.service('dataService', function($http) { 
    this.dataLists = function(callback){ 
    $http.get('/api/rebates').then(callback) 
    } 
}); 

Answer 2

的$标志似乎是错误的。您是否尝试过：

<tr ng-repeat="row in demo.data"> 

编辑：

没有测试过，但我认为这是要走的路：

$scope.tableParams = new NgTableParams({ 
    page: 1, 
    count: 10,   
    sorting: { 
    foo: 'asc' 
    } 
}, 
{ 
    getData: function(params) { 
    return $http.get('/api/rebates') 
     .then(function(response) { 
     var orderedData = params.sorting() ? 
          $filter('orderBy')($scope.data, params.orderBy()) :   
          $scope.data; 

     return orderedData.slice((params.page() - 1) * params.count(), 
           params.page() * params.count()); 
     }); 
});