【发布时间】：2014-06-03 16:02:28
【问题描述】：
tl:dr
如何使用 ajax/json 填充包含“选择”过滤器的 ng 表？
Plunk showing the problem: 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() 并包装初始数据 get 后跟 $scope.names 函数 - 但我对 promise 和 defer 的理解还不够强大，无法得到任何工作。
GitHub 上有一些注释表明这是 ng-table 中的一个错误，但我不确定是这种情况还是我只是在做一些愚蠢的事情。
https://github.com/esvit/ng-table/issues/186
非常感谢您如何进行的指针
-凯恩-
【问题讨论】：
-
如果您绕过 Api 模拟并在脚本本身上设置 $scope.data ，则在您的 plunkr 中。所以我想这就是问题所在。很抱歉不能提供更多帮助。我的方法总是使用自定义过滤器（将它们放在与标题不同的位置），并且我有大量的工作过滤器，其中包含从外部 API 读取的选择。如果您可以将其视为解决方案，我可以向您发布一个示例。
-
@Andión 是的，直接在脚本中设置数据可以解决时间问题，然后过滤器可以正常工作 - 但是，这意味着脚本中的数据对于动态数据来说似乎有点尴尬。如果可以解决问题，那么将过滤器置于外部似乎是一个很好的解决方案 - 您可以通过示例发布答案吗？
-
在我写答案时，我想我遇到了“问题”！ :)
-
不，虚惊一场...... :(我会写我现在正在做的事情，这对我有用。
标签： javascript angularjs ngtable