9

我正在尝试使用 ngTables 通过 AJAX 调用对数据进行排序和过滤。目前我能够使用 ng-repeat 复制数据，但我的排序功能均不适用。我引用了这个示例http://plnkr.co/edit/zuzcma?p=info并且能够使用 mock.js 文件让它工作，但现在我使用的是我加载到我的网络服务器上的文件和我似乎无法让它工作。

我确信答案相当简单，并感谢任何帮助。我附上了我的标记，向您展示我的控制器和 html 文件的样子。谢谢大家，如果您需要更多信息，请告诉我！

以下是我引用的 API 的一些链接。

http://bazalt-cms.com/ng-table/

http://bazalt-cms.com/ng-table/example/6

HTML：

<div ng-controller="myController">
  <table ng-table="tableParams" show-filter="true" class="table table-condensed">
    <tr ng-repeat="user in data">
      <td data-title="foo" sortable="foo">{{user.foo}}</td>
      <td data-title="bar" sortable="bar">{{user.bar}}</td>
    </tr>
  </table>
</div>

控制器：

var app = angular.module('app', ['ngTable']);

app.controller('myController', function($scope, $http, $filter, ngTableParams) {

 $http.get('http://jsondata.com/myjson.json')
  .success(function(data, status) {
    $scope.data = data;
  });

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

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

4 回答 4

17

你的问题是你在你的内部使用局部变量数据ngTableParams，同时你在success函数的范围之外。

更改您的代码，如下所示：

var app = angular.module('app', ['ngTable']);

app.controller('myController', function($scope, $http, $filter, ngTableParams) {

 $http.get('http://jsondata.com/myjson.json')
  .success(function(data, status) {
    $scope.data = 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()));
        }
      });
  });


});

看到从里面data到$scope.data里面的变化ngTableParams。

提示：如果你只是将你的函数ngTableParams放在你的success函数中，它也可以工作，而无需更改data为$scope.data. reload()但是，如果你想要你的桌子，改变变量会给你更好的灵活性。

于 2014-05-22T09:20:57.113 回答
2

$defer 需要在 ajax 调用完成后在 getData 中解析。在您提供的示例中，ajax 调用位于 getData 中：

var app = angular.module('app', ['ngTable']);

app.controller('myController', function($scope, $http, $filter, ngTableParams) {

$scope.tableParams = new ngTableParams({
    page: 1,            // show first page
    count: 10,          // count per page
    sorting: {
        foo: 'asc'     // initial sorting
    }
}, {
    total: data.length, // length of data
    getData: function($defer, params) {
        $http.get('http://jsondata.com/myjson.json')
           .success(function(data, status) {

               // use build-in angular filter
               var orderedData = params.sorting() ?
                   $filter('orderBy')(data, params.orderBy()) :
                   data;

               $defer.resolve(orderedData.slice((params.page() - 1) * params.count(),  params.page() * params.count()));
            });
        }
    });
});
于 2014-02-26T13:44:56.497 回答
1

第一步是在您的可排序属性周围加上引号：

  <td data-title="foo" sortable="'foo'">{{user.foo}}</td>

ngTable 需要一个表达式。

第二步是检查您使用的是哪个版本的 ngTable，如果是 0.3.2，请查看这个 ngTable 问题：https ://github.com/esvit/ng-table/issues/204

祝你好运）

于 2014-02-26T13:06:53.747 回答
0 
<tr ng-repeat="user in $data">
      <td data-title="foo" sortable="foo">{{user.foo}}</td>
      <td data-title="bar" sortable="bar">{{user.bar}}</td>
</tr>

您可以直接在您的 js 中引用数据，而无需$scope.data = data. 我尝试过并为我工作得很好。

于 2016-03-02T03:38:57.160 回答