tl:博士
如何使用 ajax/json 填充包含“选择”过滤器的 ng 表?
Plunk 显示问题:http://plnkr.co/Zn09LV
细节
我正在尝试掌握 AngualrJS 和 ng-table 扩展,尽管当我使用在 javascript 中定义的静态数据时,我可以获得一些带有工作过滤器的漂亮表格 - 一旦我尝试将真实数据加载到我碰到了一个障碍。
ng-table 的主体已正确填充,只要我只使用文本过滤器,一切似乎都可以正常工作:
<td data-title="'Name'" filter="{ 'Name': 'text' }" sortable="'Name'">
{{user.Name}}
</td>
工作得很好。
但是,如果我更新它以使用选择过滤器:
<td data-title="'Name'" filter="{ 'Name': 'select' }" sortable="'Name'" filter-data="Names($column)">
{{user.Name}}
</td>
我遇到了一个同步问题,因为总是在数据从服务器返回之前评估 Names 变量。(可能在向服务器发送请求之前评估 Names 变量。)这意味着我得到一个空列表用于过滤器。
一旦数据从服务器返回 - 我似乎无法找到更新选择过滤器的方法。重新运行最初创建过滤器列表的代码似乎没有效果 - 我不确定如何触发 ng-table 重新检查其过滤器,因此不会读取更新的变量。我也想不出一种方法来推迟对变量的评估,直到异步调用完成之后。
对于我的 javascript,我几乎使用了来自 ng-table GitHub 页面的示例 ajax 代码,并将选择过滤器的示例代码添加到它上面。
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10, // count per page
sorting: {
name: 'asc' // initial sorting
}
}, {
total: 0, // length of data
getData: function($defer, params) {
// ajax request to api
Api.get(params.url(), function(data) {
$timeout(function() {
// update table params
var orderedData = params.sorting ?
$filter('orderBy')(data.result, params.orderBy()) :
data.result;
orderedData = params.filter ?
$filter('filter')(orderedData, params.filter()) :
orderedData;
$scope.users = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
params.total(orderedData.length); // set total for recalc pagination
$defer.resolve($scope.users);
}, 500);
});
}
});
var inArray = Array.prototype.indexOf ?
function (val, arr) {
return arr.indexOf(val)
} :
function (val, arr) {
var i = arr.length;
while (i--) {
if (arr[i] === val) return i;
}
return -1
};
$scope.names = function(column) {
var def = $q.defer(),
arr = [],
names = [];
angular.forEach(data, function(item){
if (inArray(item.name, arr) === -1) {
arr.push(item.name);
names.push({
'id': item.name,
'title': item.name
});
}
});
def.resolve(names);
return def;
};
我尝试了一些尝试来添加额外的 $q.defer() 并包装初始数据,然后是 $scope.names 函数 - 但我对 promise 和 defer 的理解不足以让任何工作正常进行。
GitHub 上有一些注释表明这是 ng-table 中的一个错误,但我不确定是这种情况还是我只是在做一些愚蠢的事情。
https://github.com/esvit/ng-table/issues/186
关于如何进行的指针非常感谢
-凯恩-