通过AJAX加载JSON与NgTable参数加载、参数、AJAX、NgTable
我试图用ngTables进行排序和使用过滤数据的AJAX调用。目前，我能够与NG重复复制数据，但没有我的排序功能适用。我引用这个例子 http://plnkr.co/edit/zuzcma?p=info 并能得到它使用mock.js文件的工作，但现在我用，我装上我的网络服务器上，我似乎无法得到它的工作。
我敢肯定的回答相当简单，AP preciate任何帮助。我重视我的标记给大家展示一下我的控制器和HTML文件的样子。谢谢大家让我知道，如果你需要的信息了！
下面是一些链接到API，我引用。
http://bazalt-cms.com/ng-table/
http://bazalt-cms.com/ng-table/example/6
HTML：
＆LT; DIV NG控制器=myController的＆GT;
＆LT;表NG表=tableParams显示过滤器=真正的类=表的表冷凝＆GT;
＆LT; TR NG重复=用户数据＆GT;
＆LT; TD数据标题=foo的排序=富＆GT; {{user.foo}}＆LT; / TD＆GT;
＆LT; TD数据标题=栏排序=酒吧＆GT; {{user.bar}}＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; / DIV＆GT;
控制器：
VAR应用= angular.module（'应用'，['ngTable']）;
app.controller（'myController的'，函数（$范围，$ HTTP，$过滤器，ngTableParams）{
$ http.get（'http://jsondata.com/myjson.json）
.success（功能（数据，状态）{
$ scope.data =数据;
}）;
$ scope.tableParams =新ngTableParams（{
页面：1，//显示第一页
数：10，每页//数
排序：{
富：ASC//初始排序
}
}，{
总：数据data.length，//长度
的getData：函数（$延迟，则params）{
//使用内置的角度过滤器
VAR orderedData = params.sorting（）？
$滤波器（'ORDERBY'）（数据，params.orderBy（））：
数据;
$ defer.resolve（orderedData.slice（（params.page（） - 1）* params.count（），params.page（）* params.count（）））;
}
}）;
}）;
解决方案
你的问题是，你用里面的局部变量数据的 ngTableParams ，并在同一时间，你是在成功的范围的功能。
更改code上是这样的：
VAR应用= angular.module（'应用'，['ngTable']）;
app.controller（'myController的'，函数（$范围，$ HTTP，$过滤器，ngTableParams）{
$ http.get（'http://jsondata.com/myjson.json）
.success（功能（数据，状态）{
$ scope.data =数据;
$ scope.tableParams =新ngTableParams（{
页面：1，//显示第一页
数：10，每页//数
排序：{
富：ASC//初始排序
}
}，{
总计：$ scope.data.length，//数据的长度
的getData：函数（$延迟，则params）{
//使用内置的角度过滤器
VAR orderedData = params.sorting（）？
$过滤器（排序依据）（$ scope.data，params.orderBy（））：
$ scope.data;
$ defer.resolve（orderedData.slice（（params.page（） - 1）* params.count（），params.page（）* params.count（）））;
}
}）;
}）;
}）;
请参阅从数据到 $ scope.data 在 ngTableParams 。
提示：如果你只是把你的 ngTableParams 的成功里面的功能，是去工作过，在不改变数据到 $ scope.data 。但是，改变的变量，如果你想重载会给你一个更好的灵活性（）您的餐桌。
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=info and 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.
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!
Here are some links to the API I am referencing.
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>
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()));
}
});
});
解决方案
you problem is that you use the local variable data inside your ngTableParams and in the same time you are outside the scope of the success function.
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 data to $scope.data inside ngTableParams.
Hint: If you just place your ngTableParams inside your success function, is going to work too, without changing data to $scope.data. But, changing the variables will give you a better flexibility if you want to reload() your table.
上一篇：如何保存和检索CONTENTEDITABLE数据数据、CONTENTEDITABLE
下一篇：重用jQuery.post（）/ jQuery.Deferred（）对象对象、jQuery、post、Deferred
