javascript 使用 NgTable 参数通过 AJAX 加载 JSON
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21805734/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Loading JSON via AJAX with NgTable parameters
提问by jacoStillLives
I'm trying to use ngTables to sort and filter data using an AJAX call. Currently I am able to replicate the data with an ng-repeat, but none of my sorting functions apply. I referenced this example http://plnkr.co/edit/zuzcma?p=infoand was able to get it to work using a mock.js file, but right now I'm using a file that I loaded onto my webserver and I can't seem to get it to work.
我正在尝试使用 ngTables 使用 AJAX 调用对数据进行排序和过滤。目前我能够使用 ng-repeat 复制数据，但我的排序功能都不适用。我引用了这个例子http://plnkr.co/edit/zuzcma?p=info并且能够使用 mock.js 文件让它工作，但现在我正在使用我加载到我的网络服务器上的文件和我似乎无法让它工作。
I'm sure the answer is fairly simple and appreciate any help. I've attached my markup to show you what my controller and html file look like. Thank you all and let me know if you need anymore information!
我相信答案很简单，并感谢任何帮助。我附上了我的标记，以向您展示我的控制器和 html 文件的外观。谢谢大家，如果您需要更多信息，请告诉我！
Here are some links to the API I am referencing.
以下是我引用的 API 的一些链接。
http://bazalt-cms.com/ng-table/
http://bazalt-cms.com/ng-table/
http://bazalt-cms.com/ng-table/example/6
http://bazalt-cms.com/ng-table/example/6
HTML:
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>
Controller:
控制器：
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()));
}
});
});
回答by Anastasios Andronidis
you problem is that you use the local variable data inside your ngTableParamsand in the same time you are outside the scope of the successfunction.
您的问题是您在内部使用局部变量数据ngTableParams，同时又在success函数范围之外。
Change your code on something like this:
更改您的代码，如下所示：
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()));
}
});
});
});
See the change from datato $scope.datainside ngTableParams.
请参阅从变化data到$scope.data里面ngTableParams。
Hint: If you just place your ngTableParamsinside your successfunction, is going to work too, without changing datato $scope.data. But, changing the variables will give you a better flexibility if you want to reload()your table.
提示：如果你只是把你ngTableParams的success函数放在你的函数里面，它也可以工作，而无需更改data为$scope.data. 但是，如果你想要reload()你的表格，改变变量会给你一个更好的灵活性。
回答by michas84
$defer need to be resolved within the getData, after the ajax call is completed. As in the example You provided, the ajax call is inside the getData:
$defer 需要在 getData 中解析，在 ajax 调用完成后。在您提供的示例中，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()));
});
}
});
});
回答by Igor R
First step is to put quotes around your sortable attribute:
第一步是在 sortable 属性周围加上引号：
<td data-title="foo" sortable="'foo'">{{user.foo}}</td>
ngTable expects an expression there.
ngTable 需要一个表达式。
Second step is to check which version of ngTable you're using, and if it's 0.3.2 check out this ngTable issue: https://github.com/esvit/ng-table/issues/204
第二步是检查您使用的是哪个版本的 ngTable，如果是 0.3.2，请查看这个 ngTable 问题：https: //github.com/esvit/ng-table/issues/204
Good luck)
祝你好运）
回答by Bhavana Rushi
<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>
You can directly refer data in your js no need to $scope.data = data.
I tried and worked fine for me.
您可以直接在 js 中引用数据，无需$scope.data = data. 我尝试过并且对我来说效果很好。
