Angularjs

Question

我在创建 ngTable 时遇到问题。我可以获得手动创建的数组以呈现良好的效果，但是当我将其连接到我的 api 时，它会失败。当然没有错误，所以我真的很困惑为什么。我得到一个 $scope.data 数组确实按预期填充，但新的 tableParams 总是未定义。

这是我的 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

$ 符号似乎是错误的。你试过了吗：

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

Answer 2

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

Angularjs - Ng-Tble - 未定义

Angularjs - Ng-Tble - Not Defined

javascript

ngtable