关于javascript：使用NgTable参数通过AJAX加载JSON


Loading JSON via AJAX with NgTable parameters

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

我敢肯定答案很简单，感谢您的帮助。 我已经附加了标记，以向您显示控制器和html文件的外观。 谢谢大家，让我知道是否需要更多信息！

这是我引用的API的一些链接。

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

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

HTML：

1
2
3
4
5
6
  <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>

控制器：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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()));
    }
  });
});

您的问题是您使用了ngTableParams内部的局部变量数据，而同时又不在success函数的范围之内。

像这样更改代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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()));
        }
      });
  });


});

请参见ngTableParams中从data到$scope.data的更改。

提示：如果只是将ngTableParams放在success函数中，则也可以正常工作，而无需将data更改为$scope.data。但是，如果要reload()表，更改变量将为您提供更好的灵活性。

相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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()));
            });
        }
    });
});
相关讨论

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

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

ngTable在那里需要一个表达式。

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

祝好运)

1
2
3
4
<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。
我尝试并为我工作得很好。